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Presenting the new Power Mac G4 — the first personal 
computer that creates custom DVDs playable in 


ordinary DVD players. This unprecedented feat is 


~ made possible by two Apple breakthroughs: the aptly 
named SuperDrive; an industry-first DVD-R+CD-RW drive that burns 
both DVDs and CDs. Plus iDVD, Apple's revolutionary new software 
that lets you create DVD titles so simply it's, well, revolutionary. Together 
with iMovie or Final Cut Pro (sold separately), you've got your own 
Hollywood production company. And to burn your own soundtrack CDs, 
there's Apple's new iTunes— the world's most advanced yet easiest-to- 
use digital music software. 

Of course, there are other significant changes on the Power Mac G4 
to help you take advantage of this amazing technology. Like an NVIDIA 
GeForce 2 MX graphics card; a dramatically faster system bus, five slots 
(one super-fast AGP 4X graphics and four high-performance PCI slots), 
built-in Gigabit Ethernet, plus AirPort,” FireWire and USB ports. 

All this is combined with a phenomenally powerful G4 processor. 
With sustained speeds of up to 5.5 gigaflops (performing up to 57% 
faster than the new Pentium 45), the new Power Mac G4 has more than 
enough power to burn CDs, DVDs and — oh, yeah — Pentiums. 


For more information, call 0800-0391010 or visit wwwapple.com/uk. 


Spin your own music. iTunes lels you create a digital music library right on your Mac. Rip audio 
CDs, create playlists of your favourite songs, copy them into your portable MP3 player — even 
burn your own custom CDs. And with iTunes’ amazingly easy to use interface, you can do it 
all without asking a teenager to show you how. 


Your movies: Now on DVD. Apple's revolutionary SuperDrive and iDVD software let you create 
and burn your own custom DVDs that play in ordinary DVD players. Simply assemble your 
content from iMovie, Final Cut Pro or any QuickTime source. Choose your own menu style, 
then click "Burn DVD." For even more full-featured, professional DVDs, use Apple's DVD Studio 
Pro sofware (sold separately). 


@ Think different. 


*DVD-R configurations only.**iTunes and iDVD are licensed to you only for reproduction of non-copyrighted materials, materials in which you own the 
copyright, or materials you are authorised or legally permitted to reproduce.}Standard on top three models.771SP compatibility may vary.§Based on Photoshop 
tests on available systems as of 22/12/00. ©2001 Apple Computer, Inc. All rights reserved. Apple, the Apple logo, Final Cut Pro, FireWre and Mac are registered 
trademarks of Apple Computer, Inc., registered in the U.S. and other countries, AirPort, DVD Studio Pro, Power Mac, QuickTime and Think different are trade- 
marks of Apple Computer, Inc. Other product and company names mentioned herein may be trademarks of their respective companies. 
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Wander through the interface and 
become familiar with the key 
elements of Dreamweaver. 


Recreate your visualised design in 
HTML with our layout techniques. 


We take you through connections, 
DSNs and setting up your personal 
Web server. 


Create a great Website with 
different elements pulled together 
from different programs. 


58 
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82 


UltraDev 4 makes the creation of 
fully database driven libraries 
easier than ever before. 


Incorporate a navigation bar in 
Fireworks into a Dreamweaver 
template for easy updating. 


Make site maintenance easier for 
managers and contributors. 


We explore how a number of 
Extensions integrate with UltraDev 
to make a graphics catalogue. 


40 


54 


86 


Expert solutions to 40 of the most 
annoying browser bugs and itches. 


Supercharge your knowledge of 
Web application with our plethora 
of shortcuts and tips. 


From coloured scrollbars to 
sending forms, our experts answer 
your Dreamweaver questions. 


We've selected the best - and 
mostly free - Extensions to give 
Dreamweaver more versatility. 
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There's plenty of resources 
available on the Web. We point you 
in the right direction. 


Whether you want to learn more 
about code or brush up on your 
UltraDev skills, there's a book here 
to help you do it. 
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creative team and developers work Fireworks 4, Flash 5, Photoshop 6, a pala 
together to produce working LiveMotion, Netscape 6 and more. 
designs with minimum hassle. 


A7 Subscriptions 
66 
Subscribe and save 50 per cent. CHiablane 
Design Plaza gives the browser a e 
stylish Dreamweaver makeover. 74 
44 Subscribe to Arts and the Specials parereenig 
and save yourself 39 per cent. 
Random Media created its original Editorial 
company Website with a 37 
deliberately anti-Flash attitude. 
Order now, they're selling out fast! 
88 
98 www. computerarts.co.uk 
Nykris has great experience in both 
_ the creative and the technical. 100% Flash. 
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from Canopus. 
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All other trademarks or registered trademarks are properties of their respective holders. All Specifications subject to change without notice. 
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With its intuitive user interface, 
Dreamweaver 4has everything you 
need to develop a professional 
Website with ease. 


All the functionality of Web design, 
plus extensive features for 
integrating with databases. 


We show you how to set up a 
navigation bar in Fireworks and 
incorporate it into a Dreamweaver 
template for easy updating. 
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Modify different elements of 
your Website by accessing Flash 
tools to build graphics directly 
in Dreamweaver. 


Generator is the server solution for 
automatically delivering dynamic, 
on-the-fly, personalised Web 
graphics whenever you choose. 


One of the Web’s most widely used 
interface design, image-editing, 
and graphics—optimisation tools. 


The Web browser everyone 


should have! 
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e up to 
Dreamweaver 


An understanding of the limitations and 
potential of the coding language HTML goes a 
long way when producing your site 
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icking up the basics of 
Dreamweaver should be fairly 
straightforward for anyone 
with word processing skills. 
You format text using familiar buttons, 
graphics are embedded with minimal 
fuss and even tables are intuitive to 
introduce. However, what tends to put off 
many designers from experimenting is 
the small amount of configuration 
necessary before they can get on with 
converting their designs into functional 
Web pages. What we'll do here is take a 


wander through the interface and 
become familiar with the key elements 
before we create any pages. Unlike the 
word processor however, Dreamweaver 
is based around HTML so a little 
understanding of the limitations and 
potential of this humble coding language 
will go a long way. In theory you could 
happily work away without ever having to 
confront those strange pointy brackets, 
but if you're serious about your designs 
then you'll need to get right under the 
bonnet and start tweaking tags. 


Part 1: A first glance 


With so many palettes and windows floating around, it's hard to know what to look at first. 


Before we dive in, let's get our bearings... 


Guided tour 


Macromedia has provided a 
guided tour and lessons that can 
be found under the Help menu 
options and include animated 
clips and example files. 


a The first thing you'll notice about 
Dreamweaver is the sheer amount of windows 
and palettes used and how confusing it can all be 
unless you've got a good idea about what does 
what. This aim of this introduction is to help you 
find your way around. 


There are actually only three main elements 

you will be using regularly: the Site window 
which provides Site Management tools, the 
Document window on which you create your pages 
and the Property inspector which provides most of 
the tools and options you'll be working with. 


3 | Other palettes are used for additional features 
such as control of style sheets, behaviours (or 
JavaScript) as well as providing reference, assets and 
history items. These are all-important additional 
components but the Site and Document windows 
along with the Property inspector form the core of 
the application. 


Part 2: The Site window 


Understanding just how Dreamweaver helps you manage your sites is essential to keep your workflow 


efficient — welcome to Dreamweaver's backbone 


Site preferences 


You can change the default 
layout of the Site window under 
the site category in 


»| 
oe 


Peay 


Edit>Preferences, From here, you 
can configure your FTP and 
Firewall options or just move 
your local files to the left pane if 
you prefer. 


The Site window could be considered to be a 
cross between Windows Explorer and an FTP 
client and provides all the global Site Management 
tools within Dreamweaver's arsenal. By default, 
local files are displayed on the right while the 
server's contents are shown on the left. 


If the Site window isn’t currently available, 

go to Window>Site Files. The interface at the 
top of the Site window provides some basic FTP 
functions such as connecting to the server, 
refreshing the contents and uploading and 
downloading files. 


Go The status bar provides information on 
selected files as well as providing some 
indication of your transferring file's given status. 
Current activity can be halted using the red stop 
sign that becomes available when file transferral is in 
operation. The collapse/expand triangle in the 
lower-left corner lets you reduce the window size. 


4 | The top-left buttons toggle the display of your 
site's structure between File and Map view. 
The default File view displays your files in a 
recognisable files and folders format while the Map 
view displays a graphical variant based on how the 
documents are linked to one another. 


Green Candle 


The dropdown Site menu allows instant access 

and lists sites you've defined. To switch sites, 
choose a different site from the list. To add a site or 
edit the information for an existing site, choose 
Define Sites from the bottom of the menu. 


Update F 


G One of Dreamweaver's most powerful features 
is its awareness of the relationship between 
files. If you change a file name or move files 
between folders from the Site Manager window, 
Dreamweaver will automatically update links and 
references in all related pages. > 
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Other featured tools available through the You can check the status of your site's links The Synchronise Files option is a useful tool for 
menu bar's Site dropdown include facilities for G too, ensuring that your visitors never see 404 identifying locally amended files waiting to be 


reporting on your team's workflow and checking errors. Changing links site-wide enables you to uploaded. Often amending updates will require 
the efficiency of your site's code. Redundant, empty —_ manually amend links to point to new locations; changes to various pages; this feature enables you 
and combinable tags can be identified, as can useful if you have a ‘current’ newsletter on your site to concentrate on your work without having to 
untitled documents and missing alt tags. that needs replacing. remember which files need updating. 


Part 3: The Document window 


The Document window acts as a canvas on which to create your pages. It's time to get those creative juices 
flowing and forget all about those pointy brackets for a while 


Table tips 


When working with tables, you 


can select a table cell quickly by body bgcolor="#FFFFFF” texc="#000000"> 

tang dome = copes mma g  er 
Control/Command key and pody> 

clicking inside it. Hold the 
Control/Command key down 
and click other cells to select 
them too or click and drag to 
select multiple adjacent cells. 


OE 
The Document window provides the canvas Dreamweaver 4 provides access to either a - 

on which you create your pages. You have WYSIWYG Design view or Code view or a Although basic access to the title tag is 
control over layout, can access the code or amenda —_ combination of the two using the three top-left possible from the toolbar, you can use 
page's properties such as <HEAD> and <TITLE> buttons. Being aware of what is happening under Modify>Page Properties to gain greater control of 
content and have access to code checking and the bonnet as you work in Design view is invaluable —_ your page's properties including text and link 
formatting options. for keeping control of your site's code. colours, margin attributes and background images. 


<font size="5" face="Verdana, Ar 
serif” color="#009933">The 


G The status bar again holds essential 

Other features in the toolbar include File information that can often be overlooked. 
Content in the head of a document is Management options, Page Preview and The Window Size feature instantly resizes your 
accessible above the Design view if it's Debug tools, Design View Refresh, access to the canvas to emulate different screen resolutions while 

activated from View>Head Content. Contents are O'Reilly reference files, code navigation used for the connection speed gives some indication as to 

displayed graphically as icons depicting functions debugging JavaScript code and View options for how fast (or slow!) your page loads over variable 

that can be modified via the Property inspector. both the Design and Code panes. connection speeds. 
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Part 3: The Document window continued... 


7 | The left of the status bar holds the Tag 
Selector. This seemingly random collection of 
tags displays the tag hierarchy of selected text or 
objects and is useful for selecting and modifying 
elements such as table cells within your page. 
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8 | The Launcher to the right of the status bar is a 
standard feature throughout Macromedia's 
products providing instant access to other key 
Dreamweaver elements such as the Site window, 
and we'll take a look at the other palettes over the 
coming pages. 


‘Search alows you lo quickly add a powerful search 
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9 | The menu bar through the Document window 
provides a wealth of features too long to go 
into here but key features include control of 
Dreamweaver's templates and libraries and access 
to the Extensions Manager plus tools for 
streamlining your source code and its formatting. 


Part 4: The Property inspector 


With all those floating windows cluttering up your desktop eating away at your screen's real estate, here's 
one floating palette you might want to keep open 


Vanishing palettes 


There are times when your 
desktop seems to be cluttered 
with palettes getting in the way of 
your work. Hitting the F4 key 
toggles them on and off and 
helps to reclaim that valuable 
work space. 


@ The Property inspector acts as a contextual 
toolbar providing options depending which 
object is selected within the Document window. 
Choose the Windows>Properties option to toggle 
this tool on and off and use the expander in the 
bottom-right corner to access further options. 


When a table or cell is selected, you can 

amend the number of rows and columns 
necessary, dimensions, cellpadding and spacing, 
alignment and border options plus any background 
colour or image requirements you may have. 
Merging cells is as simple as selecting adjacent cells 
and pressing a button. 


2 | When text is selected, many of the Property 
inspector's functions are easily recognisable. 
Entering a location in the link box creates targetable 
links. A really cool feature enables you to define a 
links location by dragging the cross-hairs to a file in 
the Site window. 


AP ad 1 for te te, plat Gp for each 


- Yai the Property inspector with 
right-click (PC) or Control-click (Mac) 
contextual options through the Document window 
also provides further object specific options. It is 
through the combined potential of the Property 
inspector and the right-click options that all your 
commonly-used commands are easily accessible. 


g Selecting a graphic enables changes to familiar 
attributes associated with <IMG> tag; 
dimensions, source location, border preferences and 
alt text are available plus alignment, link creation 
and vertical and horizontal spacing. Image maps can 


also be easily created here. 


G The contextual options are also available 
through the Site window providing easily 
accessible tools and features relevant to your 

selected object. > 
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Part 5: Other palettes 


There isn't space here to look at all of Dreamweaver's palettes in-depth, but hold tight as we take a quick 
look through a selection of the most commonly-used features 


Stuck for ideas? 


Take a visit to the Dreamweaver 
Exchange and check out the 
freely downloadable Extensions. 
Here you'll find plenty of tools 
to help provide some ideas for Usistind Dowumecrt fUnbited 21 Derammuaver 

your next site. Pr Ee “vive beak Beds Lok ownnts, ie. acon: Hos 
HP) AR) AY |The Untied Documert 46.0.) 2 ee )) 1D, 


1] The Objects panel contains buttons for 
creating and inserting objects directly onto 


your page. This includes everything from images 
and tables, through form elements and frames, 
special characters, <HEAD> elements and invisible 
characters such as internal anchors. Other options 
may become available after downloading and 


The Objects panel also provides switches to 
toggle the Document window between Design 

and Layout view. Working in Layout view enables 

you to draw tables and cells directly onto the page, 


The Launcher provides easy access to 
Dreamweaver's main components including 
the Site window. A smaller version of this feature 
can be found in the bottom-right corner of the 
Document window. For a quick overview of 


providing a flexible method of perfecting your 


Dreamweaver's capabilities, we'll take a quick look 
design before rendering it to HTML tables. 


installing Extensions here too. through these and other palettes provided. 


G Style sheets can be configured, enabling 
selected text to inherit CSS attributes directly. 
HTML styles work in a similar way in that a style can 
be defined and associated with text. The main 
difference is that HTML styles will embed tags 
directly around your selection, while CSS styles link 
through to the associated style sheet. 


G ‘Behaviours’ is Dreamweaver speak for 
JavaScript. Like JavaScript, behaviours must be 
associated with an event such as a mouse click or a 
page loading. The most popular scripts are available 
although it is possible to hand code scripts or 
download more from the Macromedia 
Dreamweaver Exchange site. 


4 | The Assets palette has a similar function to the 
library in Flash, acting as a central resource for 
your site’s components. Images, colours, links and 
scripts used can be accessed as can Flash, 
Shockwave and movie clips. You also have access to 
any templates or library items created. 


<body bgcolor="#FFFFFF” leftmargin="0" topmargin®"0" 


ginvidth*"0" marginheight*"0" onLoad="" link="#990000" 
Link="#ec6600" alink="#oc9933"> 


the TITLE element affeots what the user sees 
displays its content in the browser window's 
align="center™> 
<te bgcolor="#FFrrrr”> 
<td> <b><font face="Arial, Helvetica, sans-serit™>How 


© ORDER: </tont></b><font face*"Arial, Helvetica, sans- 
Af"><br> 


<font sise="2">Print out this form to help you 


shows the elements that may be nested inside a HEAD element 
according to three different specifications. 


8 | The Code inspector provides a separate 
window for you to keep an eye on your code 
should the split screen option of the Document 
window be insufficient. Combined with the 
Document window's Design view (and providing 
you have enough screen space and a powerful 
enough computer) this provides fantastic control 
over your output. 


The History palette provides the option to 

backtrack a number of steps as well as 
enabling you to copy selected steps or save them as 
a command should you need to batch process 
elements of your code. Recording sequences of 
events is also possible through the Document 
window's Command menu. 


9 | Other palettes not available on the 

launcher provide control over frames and 
layers (providing options in the Property inspector) 
as well as the comprehensive guides provided by 
IT publishing giant O'Reilly on HTML, CSS 

and JavaScript. 
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Part 6: Getting started 


Now you know our way around, take five to configure Dreamweaver before dabbling with its features and 
weaving your first dream site... 


Manage your files 


Experiment with the changing file 
names and moving files around 
in the Site window as associated 
pages automatically update their 
links. Pretty handy if your site's 
solitary news page is being 
upgraded to a sequence of pages 
which might be better stored in 
their own directory. 


Layers 
Layout 


rm 


By default, Dreamweaver has a curious 
configuration which launches the Document 
window on start up. Through the preferences found 
at Edit>Preferences you can change this under the 
general category by checking the ‘Show only site 
window at start-up’ — a useful modification as the 
Site window is arguably the core of the software. 


The final preference change to consider can be 


found in the Preview in Browser category. You 
can add a secondary browser enabling you to 
preview your pages instantly in your primary 
browser by hitting your keyboard's F12 button or in 
the secondary browser using the control-F12 (PC) 
or Command-F12 (Mac) combination. 


Selecting your method of accessing your site's 

server prompts specific configuration options. 
In most cases this will be FTP. Enter the relevant 
details for Remote Info and ignore the Check 
In/Out preferences for now. None of the other 
categories are essential so have a look around and 
when you're happy, click the OK button. 


You might want to tweak a few other 
preferences while you're here so have a look 
around. One to definitely check out would be under 
the File Types/Editors category. As Dreamweaver's 
coding strengths are somewhat limited, associate a 
dedicated HTML editor for round-trip editing. 


Before we can get into creating our first page, 

we need to define our site's root folder. Go to 
the Site window and select the Define Sites option 
in the Site dropdown menu. Click the New button 
to access the Site Definition window. 


scanning all files in sit 


Dreamweaver will now cache the contents of 

your new site. If you are defining an existing 
site which you want to manage in Dreamweaver, it 
is at this point that the cache will determine your 
site's contents and assets and the files’ relationships 
with each other. 


In the same category you might prefer to 
specify your own image editing software. Click 
the plus symbol and locate your graphics package — 
OK this and click the Make Primary button. You 
now have the chance to launch and edit your 
graphics straight from the Document window. 


G Complete the details for the local info category 
by entering a name, local root folder and HTTP 
address. Check the Enable Cache option to ensure 
your Site Management tools are efficient and then 
select the Remote Info category. 


9 Back in the Site window, you should have an 
empty window. Go to File>New File and you'll 
notice an untitled file has been created - rename 
this to index.htm, open it and you can now start 
working on your new site's home page. 
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40 bugs &itches 


The things that make your Websites go wrong and how to solve them; 
plus tips on sniffing out what platform your viewer is using... 


alf the battle in Web design seems to be dealing with bugs and itches: code that we 

_ dont understand, browsers that mash our beautifully-crafted pages to a pulp, notto 
mention the ever-increasing range of different tools people use to view Web pages — 
all obstacles that Web designers navigate daily, 

Fortunately, most bugs and itches have a fix: a direct action you can take to solve the problem. This 
isn't always case, but where there isn'ta fix, there is always a workaround: an alternative route, or 
sometimes even a hack — there are one or two here — that can help you get the result you want. 

In the most dire cases, you may have to rethink what you're trying to achieve in orderto make the 
workaround. But this is rare, and by and large the more you know about the problems you're likely to 
face, and how to solve them, the better your Web pages will be. 

You'll see that the vast majority of the bugs and itches revolve around Netscape. We're not 
biased, but you'll probably find that you spend most of your time conjuring magical solutions for 
extraordinary Netscape issues. If you can get your page to work in NS, then the chances are it'll 
work with just a little twiddling in IE, so if you concentrate on checking your page in Netscape first, 
you'll save yourself a little effort. 

Itis absolutely essential that you check your pages every couple of minutes in all the major 
browsers while you are creating ther. Just because they look right in Dreamweaver, they may not 


Expertise provided by Nick Nettleton 
fe} nick.nertleton@futurenet.co.uk 


work so wellin a real browser. Check regularly to avoid a nasty shock at some point, and you 
should have Netscape 6, as well as 4.x, installed on your machine. 

Netscape 6 was designed to be the first completely ‘standards-compliant’ browser, 
although it was immensely buggy and all Web designers should have the 6.1 updater (go to 
[w] www.netscape.com) just to save their souls. The term ‘sta ndards-compliant’ also refers to the 
WS3C's standards, or more specifically, Microsoft's, and Internet Explorer. 

This is because Internet Explorer has well over 80 per cent of the browser market, and at the end 
of the day, you've got to design your site to suit the majority of your users. Most sites have been 
designed with more features for users with IE5, ona PC at least, and now NS6. 

Yet with the sudden onslaught of new technologies for accessing the Web ~ via TV, PDA or 
mobile, or even your games console — designers are having to rethink their strategy. Everything 
about pages created for desktop computer browsers, frorn the code to the structure, is going to 
cause problems in these new media. 

This is why, at some point or other, you're going to need to know about browser sniffing: finding 
out what system your user has, so you can make sure they're seeing what you want to them to see. 
Here, we suggest a range of solutions to browser sniffing, and show you how to use them to create 
browser specific code that will get your pages working, whoever is looking at thern. > 
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The basics 
Even the really simple stuff can be awkward 


TT Eee 


1 Page margins 

Unless you specifically set margin sizes for your Web pages, you'll find they come out 8px on IE and 
14px on NS, which is a pain if you're fussy or want to use absolutely-positioned layers. Also, the 
method for setting the margins for either browser is different. 


Solution: in Dreamweaver, select Modify>Page Properties and set your Left Margin and Top 
Margin (for IE), and your MarginWidth and MarginHeight (for NS). The HTML appears in your 
<BODY> tag: 

<BODY leftmargin="10" topmargin="10" marginwidth="10" marginheight="10"> 


2 CSS page margins 
In fact, according to the W3C, this code is now obsolete, and you should use the CSS alternative, 
setting margins and padding to Opx for the <BODY> tag, which you can do via Dreamweaver's 
CSS palette: 

body{ margin: Opx; padding: Opx} 
But, sorry to say, you'll find this won't work in NS4.x. 


Solution: Stick with the above (incorrect) solution, which works just fine... 


Browser sniffing 


Browser sniffing is the art of finding out what browser and version your viewer is using, 
as well as information about their platform, screen resolution, plug-ins and more. You 
can do this within the browser, or‘client-side’, which means all the code is included in 
the HTML file your viewer receives, and then use JavaScript or another technique to 
select whatever is displayed. Or you can do this on the server, or‘server-side’, in which 
case only the relevant code is sent to your viewer. For this, you need to have a dynamic 
server, supporting a technology like ASP JSP PHP or CFML and so on. 


JavaScript sniffing 


This is the most common type of sniffer: it has no special server requirements, and is relatively 


easy to implement. The key to JavaScript browser sniffing is the term navigator.userAgent, 


which returns complete information about the user's browser and platform. You use or have 


seen code which uses if(document.all) and if(document.layers) to choose between IE and 


Netscape, but these aren't good enough in today’s more standards-compliant environment, 
and NS6 won't respond to the document.layers test. Instead, use a code like the following in 


the head of your document, which stores all the browser info in JavaScript variables: 
<SCRIPT language="JavaScript"><!— 
agt=navigator.userAgent.toLowerCase() //stores browser info in a variable 


ver=parseint(navigator.appVersion) //gets a round number for the version 


app=navigator.appName.toLowerCase() 


5 Lines 
Unless simple is what you want, there's not much point bothering with the Horizontal Rule in your 
Common toolbox, <HR>. You can set its width, height and shading, and in Internet Explorer you can 
set its colour too: 

<HR noshade width="400" size="1" color="blue"> 
But in Netscape, it'll still just come out in your system colours, which is why there's no colour option 
in the Dreamweaver palette for setting a colour. 


Solution: Instead, use a table cell (see below) or stretched 1px coloured GIF images to create lines. 
6 Huge spaces 


Every time you hit Return, Dreamweaver creates a new paragraph, using the <P> tag. This creates a huge 
space between the lines of text, images or whatever. What if you just want to move on to the next line? 


Solution: You need a soft-Return, or line break, created using the <BR> tag. In Dreamweaver, just 
hit Shift+Return. 


7 Font sizes 

If you check your pages across various 
browser-platform combinations, you notice that 
your text comes out all different sizes, sometimes 
readable, sometimes not. Some designers don't 
mind, many even argue in favour of it. 


Solution: Use Style Sheets to set your font size, 
via Dreamweaver’s CSS palette. Set the size in pixels (px) or points (pt) to gain the best control. 


8 Font sizes part 2 
Now if you're really picky, you’ll see that your font still renders about 1 px smaller on Netscape than it 
does in Internet Explorer. You may not mind, but if you do... 


Solution: Create separate styles for Internet Explorer and Netscape, and then use a browser 
sniffer to set the relevant style sheet, depending on your user's set-up. 


mac=(agt.indexOf(‘mac’)!=-1)?1:0 
//—></SCRIPT> 
Now to write browser-specific JavaScript, all you need is to use tests like if ie), if(ie5) or if(ns6 
&& mac). For writing browser-specific HTML, you'll want to combine this with the 
document.write command, ina script like this: 
<SCRIPT language="JavaScript"><!— 
if(ie){ 
document.write(‘This is the HTML for Internet Explorer’) 
} 
if(ns){ 
document.write('This is the HTML for Netscape’) 


ie=(agt.indexOf(‘msie')!=-1 Il agt.indexOf(‘Microsoft’) !=-1)?1:0 //looks for explorer } 


ns=(agt.indexOf(‘netscape') !=-1 ll app.indexOf(‘netscape') !=-1)?1:0 


ie4=(ie && ver==4 && !(agt.indexOf(‘msie 5')!=-1))?1:0 //compatibility mode issue 


ie5=(ie && (ver==5 ll agt.indexOf(‘msie 5')!=-1))?1:0 
ie6=(ie && ver==6)?1:0 

ns4=(ns && ver==4)?1:0 

ns6=(ns && ver==5)?1:0 // this isn't a mistake. 
win=(agt.indexOf(‘win')!=-1)?1:0 
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else{ 
document.write(‘This is the HTML for anything else’) 
} 
//—></SCRIPT> 
Put this script wherever you want the HTML to appear in the document, and the JavaScript will 
select the relevant code for you. You can create complex conditions using && for‘and’, || for‘or’, 
and ! for‘not’. 


Tables 


HTML tables throw up a mass of bugs, itches and cross-browser hurdles — which is ironic because they form the foundation of most Web 


design techniques 


9 100 per cent wide 


If you want to fill the full width of the window with 

a table, you might have a problem: because 
Netscape displays the page, it calculates the width 
based on the scrollbar, before it looks at the length. 
So when the page is short and there's no scrollbar, 
your 100-per cent wide table still appears thinner 
than the browser space. 


Solution: Either (1) make your tables 110 per cent 
wide, but you'll get a sideways scrollbar which can be annoying; (2) make sure all your pages are 
longer than most screens - 800px seems reasonable, but it seems a bit cumbersome; or(3) just 
don't worry about it. 


10 Table borders 


Create a table and use Dreamweaver’s Inspector to set its Border to 1, and Border Colourto Red. 
Then look at it in Netscape .4x. You'll see that the border is indeed red, but it also has 3D shading, 
and is definitely larger than 1px. This works fine in IE, but the problem is too big to ignore. 


Solution: Create a table with a background colour for your border, and set its cell padding to 1px. 
Then put another 100 per cent-wide table in there, with the background colour you really want. The 
cell padding creates the border. 


11 Missing cells 

If table cells are empty but you've given them a background colour, you may find that they just dont 
appear in Netscape 4. This is because the browser, for some extraordinary reason, doesn't render 
empty cells. 


Solution: Most of the time, Dreamweaver thoughtfully does this for you: put an empty, 
non-breaking space character - &nbsp; - in empty cells. If you're hand-coding, you will of course 
need to do that yourself. 


12 Why are my cells too big? 
The only problem with this is if you want a cell to be particularly short or thin: the &nbsp; character 
is the same size as any normal space character, and pushes out the edges. 


Solution: Instead of the space, put a 1px transparent GIF image in there. 


Sniffing with [if IE] 


The JavaScript solution is a bit on the complex side, though, and will only work for users 
that have JavaScript turned on in their browsers. Internet Explorer offers a clever and 
quick alternative: 

<!—[if IE] 

This is the HTML for Internet Explorer 

<![endif]—> 

<! [if | 1E]> 


This is the HTML for any other browser 
<![endif]> 


In this code, the comment marks <!— // —> around the IE code make it invisible to 


browsers, except that IE spots the [if IE] selector, and therefore displays the code 
anyway. There are no comment marks around the second bit of HTML, so all the 
browsers display it, except IE which sees the the [if ! IE] selector, where ! means ‘not’. 


14 My cells are still too big! 
If you have trouble with space appearing in cells holding images, plug-ins or other non-text 
elements, you need to check the code: sometimes Dreamweaver leaves space in the code which 
causes problems in the browsers: 
<TD> 
<IMG src="imagefile” width="32" height="32"> 
</TD> 


Solution: Manually remove the spaces from the code, so that the page appears with a tight fit: 
<TD><IMG src="imagefile” width="32" height="32"></TD> 


15 Multi-column layouts 

If you're putting together a complicated layout, or 
sometimes even a simple one, getting your columns 
the same size on all the browsers becomes a 
troublesome issue. It’s a pain, but often essential, if 
you want things to line up right. There are two 
solutions to this: the light-handed and the 
heavy-handed. Try them in that order, because the 
latter doesn't help your download time. 


Light-handed solution: Carefully calculate the exact width for every column on your page, 
make sure these add up to the table widths, and then set this width for every cell. 


Heavy-handed solution: If this doesn't work, add a new row at the bottom of the troublesome 
table, and in each along here add a 1px transparent GIF image, stretched to the full width of the cel. 
This should fix things in place. 


16 Stretchy pages 

If you want to have a stretchy design with a 100 

per cent wide table, but you also want to specify 

the exact width for some of its columns, then 

you're in for Netscape trouble. If you create a 
two-column, 100 per cent wide table, set the first 
column to 150px and leave the other, then you'll find 
that in IE the 150px column really is 150px. 
Netscape, however, stretches it to fill most of the available space. 


Solution: Use tables with specific widths inside your fixed-width table columns, because NS 
wont stretch these. Then place a table in your stretchy column set to 100 per cent wide. Fill the 
columns with content, and see what you've got. Sadly, this only works if you've got plenty of content 
to put in the stretchy column. ~ 


17 Background images 

If you use background images in tables, no doubt you'll discover that Netscape displays these ina 
pretty eccentric way: the image file repeats in every single cell, rather than continuing behind the 
table area; and if you nest another table within this, the background repeats in every cellin this too. 


Solution: This is more of a workaround than a solution, and not an ideal one, but it'll do: put your 
background image ina single cell table, then put another table inside this with a 1px transparent GIF 
set as a background image. 


18 Disappearing background 

For once, here's an issue that regularly crops up in Internet Explorer, but not Netscape: your 
background image doesn't appear, or is rendered incorrectly. This seems to happen most often when 
you are using the image ina table cell holding other images with transparent areas, or no text. 


Solution: Instead of using Dreamweaver's Bg setting in the Inspector, create a style in 
Dreamweaver’s CSS palette setting the background URL, and apply this style to the cell or table. 
.background1 { background: url(imagefile.gif)} 
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Links and images 


Empty links, tooltips, rollovers and borders — getting them to work and what to do when they don’t 


19 My links don’t work 
The commonest problem on the Web - and one that’s 
a pain to fix. 


Solution: (1) Use File>Check links to find any links 
that don't work. 

(2) Make sure your links don't begin with file:///. If 
they do, make sure all the files are in the site folder, 
and link them up again. 

(3) Make sure your links have http:// or ftp:// at the 
beginning (for Web and ftp addresses), or mailto: for email links. 

(4) Make sure the files you are linking to don't have spaces in the file name: this is incorrect syntax 
and Netscape won't recognise it. 


20 Empty links 

You can use commands like onMouseover and onClick to create rollover buttons and other DHTML 
effects. Traditionally, these go in the link tag, <A href="...">, but sometimes you don't want to link 
anywhere - you just want the effect in-page. If you leave the link empty, though, when people click 
they'll link to the holding directory. IE supports onMouseover and so on for images, layers and other 
items - you don't need a link. Not so Netscape 4.x, however. 


Solution: You need to use a link. Traditionally, empty links are filled with #, but this will scroll 
your user to the top of the page if they click. Instead, type JavaScript:; as the link - this simply 
does nothing. 


21 alt and title 

Little tooltips on images are fantastic, and are 
traditionally set using <IMG alt="words here"> - 
although this doesn't work on several Mac browsers. 
According to the latest W3C standards, the alt 
properties of images is obsolete anyway, and you 
should really be using <IMG title="...">. 
Dreamweaver doesn't give you this option, so you'll 
need to type it in the code yourself; but you'll find 
that Netscape 4.x doesn't recognise it anyway. 


RESOURCES 
esktop_themes 


Solution: Use both alt and title. If you have both, IE displays the title text by preference. 


22 Tooltips on text links 

More of a tip than an itch: what if you want tips to appear on your plain text links too? Sadly, the 
alt="..." trick doesn't work here. Instead, people have spent days formulating DHTML layer-based 
solutions, which you can find on any JavaScript site but they're all a bit cumbersome. There is a 
better way: 


Solution: You can use also use title in your <A> tag for text links, although NS4.x won't take 
any notice: 
<A href="#" title="This is cool link. Click it">Link text</A> 


23 Text link rollovers 

If you've experimented with Dreamweavers CSS 
palette, you'll have found the A:hover selector. This 
enables you to set a style especially for links when 
you roll over them - to change colour or make them 
bold for instance. This works fine in IE and NS6, but 
not NS4. What can you do? 


TyOe © Make Casta Sie lots} 
7 Bedelem HTML Tag 
© \so CSS Select 


Solution: Very little. People have tried to 
formulate cunning JavaScript solutions, but these 
often don't work efficiently, and are likely to create more problems than they solve. Instead, settle on 
a different style to make links stand out in Netscape, and use a snifferto set different style sheets, 
depending on the browser. See the boxout on page 16. 
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24 Image borders 

You can quickly give an image a border using the setting in your Image Inspector. The border 
will take on the colour of the nearest surrounding font tag, or, in NS but not IES, the nearest 
surrounding CSS color value. An exception to this is if you make it into a link, in which case it 
will take on the colour of your links. Or, in NS, if your <FONT> tag is within the link. And yes, the 
variations are endless... 


Solution: Create borders as part of the image file itself, or put them inside a table with 1 px 
padding and give it the background colour of your border. Don't forget to put the HTML border 
setting to 0. 


25 CSS image borders 

In fact, the proper way to create image borders under the new W3C regime is using a CSS property: 
<IMG src="..." style="border: 1px solid black"> 

Unfortunately, NS4.x doesn't render a border around the image itself, but around a small square area 

at the bottom of the image. 


Solution: Stick with the old way forthe time being. 


26 Image alignment 

HTML and Dreamweaver’ Image Property Inspector 
give you a range of options for aligning images: 
Default, Left, Right, Middle, AbsMiddle, and so on. 
You'll probably only use the last three, most of the 
time, which is a good job, because you'll find the rest 
generate varied and unpredictable results for 
different viewers. If, for instance, you have a1-line 
high GIF you want to use as a bullet point, you might 
be tempted to use AbsMiddle. Fine in IE, but in 
Netscape this appears below the baseline of the text. 


Magazine 


Solution: Stick with Left and Right for aligning images with text, and incorporate background 
space into the image file as necessary to position it correctly. Or use a table to accurately control 
the alignment without wrapping text. 


27 Image percentage sizes 

Often you want to stretch images, especially coloured 1px GIF files to use as lines and interactive 
colour blocks. You can set sizes for images using per cent, for instance, to 80 per cent width, but 
only directly in the page body. If the image is ina table cell, Netscape will just render it at its 
normal size instead. 


Solution: Set the height and width of the image in exact pixels. If you're doing a stretchy design, 
you can use a table cell instead, with its background colour set to the colour you wanted. 


28 Images and line heights 

You can easily adjust the line height for your text, 
using Dreamweaver’s CSS, to make blocks of text 
easier to read. Netscape 4.x, however, applies this 
line height equally to images, and you may find 
images on separate lines overlapping. 


Solution: Put the image in a 1x1 table set to 
align left or right, since the line height setting 
isn't applied to this. 


Forms 
3 Forms form the basis of interaction on the Web: they make it possible for people to send messages, share information and join discussions 
®» through Web pages. They are also notoriously difficult to design around... 


29 Form doesn't appear 

If your form doesn't appear in Netscape 4.x, or text 
appears where there should be a dropdown menu, 
you've almost certainly forgotten to include your 
<FORM> tag. IE is fine with this, but you need to get 
it right with Netscape: 


Solution: Type on either side of your form code: 
<FORM name="namehere” 
action="pageitlinksto"> 


</FORM> 


30 Massive gaps 
It’s hard to get spacing around forms right. The <FORM> tag which starts all forms, by definition 
creates a new paragraph. 


Solution: First, make sure that any text that’s connected with the entry fields is within the 
<FORM>...</FORM> tags. Remove any new paragraphs or line breaks (<BR>) from either side. 
And if you've still got too much space, put the form tags outside the nearest table cells tags: 
<FORM name="..." action="..."><TD> 
Text and form fields go in here 
</TD></FORM> 
Dreamweaverisn't keen on this, but the browsers are quite content, and display the form without all 
that extra space, which is useful in very tight layouts. 


31 Input fonts 

Don't forget to set faces and sizes for the fonts in 
your input fields, just as with your text, otherwise 
they won't look too great. Netscape, in particular, 
uses a mono-spaced font. 


Solution: You can use either the traditional font 
tag settings in your Text inspector, or CSS settings 
for more control. IE also understands background, 
border, colour and other settings for form fields, so 
you can make them look a bit funky if you want. 


me@somewhere. 
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Browser-specific style sheets 


32 Can't control text field size 

You'll notice, however, that your inputs render far bigger on NS4.x ona PC than in IE, and much 
smaller in NS4.x ona Mac, which is pretty eccentric. The first is the biggest issue, because the 
difference in size is enough to destroy your page designs if you've got an text input ina tight space - 
a search box on your navigation for instance. In NS, everything may appear out of kilter. 


Solution: Use the Dreamweaver Char Width setting to get the right fit for Netscape 4.x on 
a PC. Then use the CSS Width setting to specify a width for Internet Explorer and NS6, which 
NS4 willignore: 

<INPUT type="text” size="10" style="width:100px"> 


33 Dropdown menu sizes 

Dropdown, or <SELECT> menu sizes are even 
harder to control, because it’s hard to foresee how 
wide the items in the menu will display on each of 
the different browser/platform combinations, and in 
NS4.x ona Mac there is no way to control the font 
size at all. Moreover, the browsers automatically 
extend the menu to fit, and push along anything that 
might be in the way. 


Solution: You can set style="width:Xpx" for IE and NS6, but you might end up chopping off 
the ends of the options if you're not careful. And anyway, the main culprit here is NS4.x ona Mac, 
which displays dropdown menus particularly large. Instead, give your menu plenty of space, and 
check it carefully on all platforms. If necessary, use a browser sniffer to deliver different code to 
different users. 


34 Form button images 

If you want to use an image, rather than the traditional HTML Submit button, for people to submit 
their forms, you need to use the Image Field object in Dreamweaver's Forms toolbox, rather than the 
usual Image Object. These don't display a hand in NS4.x, to let users know to click it, so you might 
want to use a tooltip instead. The only thing is, you'll find the alt setting doesn't work in NS. 


Solution: Use the Name setting instead: this is the unlabelled box right by the image icon - this 
appears as a tooltip in NS4.x on the PC, but Mac NS4 users won't even see this. Set the alt too, but 
to meet standards, you really need to go into the code and set the same text again using the title 
attribute, which will appear in later IE versions in preference to the alt text: 
<INPUT type="image" title="Tip text” alt="Tip text" border="0" name="Tip text” 
src="imagefile" width="50" height="50"> 


Cascading Style Sheets are the most powerful way to control the look and feel of your Web pages, but they don't always get the same results in different browsers, so you'll often want to create 


specific styles for different set-ups. You can use the JavaScript technique, like this: 
if(ie){ 
document.write('<STYLE type="text/css"><!—') 
document.write('p {font: 11px Verdana; color:blue}') 


//other rules in here 
document.write('—></STYLE>') 
} 
This is good for one of two individual style rules, but if you want to deliver entirely different styles for each browser, you can also write a link to an external stylesheet: 
if(ie){ 
document.write('<LINK rel="stylesheet” href="ie_stylesheet.css">') 
} 
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Layers 
Layers are the hardest area of Web design to get working in all the browsers, and unless you're confident, it’s a good idea not to 
rely on them. Although they offer powerful features, the results are so different between Netscape and Internet Explorer that you may 


inadvertently end up creating two sets of pages 


——oO— a 


36 Netscape resize bug 

Put simply, your page contains layers, that is, <DIV>, 
<SPAN> or <LAYER> tags with aCSS 
position:absolute, and after loading it into Netscape 
and resizing the browser, the whole thing falls 

apart. Completely. 


Solution: There is nothing you can do, short of 
reloading the page again, which is a doubly bad, 
because NS4.x file caching isn't exactly great. Nevertheless, JavaScripts exist for automatica! lly 
reloading pages when the window is resizes, and Dreamweavercomes fitted with one of these on 
board: just go to Commands>Add Netscape Resize Fix. 


37 Centering layers 

Your second major layer problem is trying to centre your page. Position:relative just doesn't work 
consistently, so the only way to do it is to specify absolute layer positions in pixels from the top-left 
corner of the window. 


Solution: Don't centre your page. Or, if you really must, use a script which looks at the size of the 
browser window, then the width of the page, and calculates an offset forthe layers. You then need to 
use DHTML to move all the layers into position before making them visible. 


Web resources 


Here are a few resources if you need 
more information: 


Computer Arts Forum 

[w] www.computerarts.co.uk/forum 
Always your first stop if you're stuck or 
just want to show off something you've 
done. Post your question and the 
Computer Arts team as well as other 
members of the community will help you 
out or offer advice. 


MSDN 

[w] www.msdn.com 

Microsoft's Developers’ Network is the 
place to go if you have specific problems 
or issues with Explorer, ASP technology or 
other MS products. It's a gargantuan site, 
and it can be tough to find what you're 
looking for, but if you dont mind sifting 
through reams of documents you can be 
sure that the one you're looking for is 
here somewhere. 


Netscape 
[w] http://developer.netscape.com 


Netscape's scaled-down counterpart to 
MSDN. Here you'll find guides and 
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documentation to all the Netscape 
technologies, including a JavaScript 
reference for when you can't get your NS 
codes to work. 


Little Green Footballs 

([w] www. littlegreenfootballs.com 

An excellent and friendly Weblog by LGF 
design with stacks of information about 
the browsers, and a definite IE bias. 


Web Reference 

[w] www.webreference.com 

A superb resource with a great deal of 
information about creating cross-browser 
Web pages. This site has excellent 
documentation comparing the features of 
the major browsers and what codes 

they understand. 


World Wide Web Consortium 

[w] www.w3c.org 

The official arbiter of what is right and 
what is not: head here for extensive 
documentation on HTML and JavaScript, 
as well as dynamic validators which will 
look at your code and tell you whether 
you've really got it right or not. 


38 Layers with tables 
Netscape 4.x doesn't like to combine layers with complex table structures, tables embedded in 
layers, and so on. Sometimes you can get this to work, but often you'll find that NS just crashes. 


Solution: Make your life easy, keep it simple! 


39 Layer onMouseover 

Often you want to use onMouseover commands with layers, so you can create dropdown menus 
which detect a hovering cursor, or onClick commands if you want to create drag-and-drop interface 
elements. In IE and NS6 this is fine: you can just put the event handlers (as. they are called) in the 
<DIV> tag. But this won't work in Netscape 4.x 


Solution: Instead, you need to use an event tracker which constantly follows the position 
of the user's mouse throughout the duration of the document, using event. MOUSEMOVE 
and event. MOUSEDOWN. Then you build a JavaScript function to make comparisons with 
the position of the menu, orto drag the layer as these events occur. See 

[w] www.computerarts.co.uk/web/dhtml for an example. 


Server-side sniffing 


There are two key problems with all the client-side sniffing techniques: firstly, 
they deliver unnecessary code to the browsers, which can get lengthy in the case of 
complex pages; and secondly, they rely on your user's browser interpreting the sniffer 
correctly. This is likely to go wrong if your user doesn't have JavaScript enabled, 
or if they have a less common browser. Opera, for example, has the ability to spoof other 
browsers. If you have the equipment, a dynamic server, then server-side sniffing is by 
far the best way to go, and you can set your code up so the user only has to download the 
code that works for their machine. Here is a simple ASP example which is very much 
like the JavaScript sniffer: 

<% 

dim ie, ns, win, mac 

agt=Request.ServerVariables(“HTTP_USER_AGENT") 

agt=LCase(agt) ‘convert to lower case 

ie = InStr(agt,"msie") + InStr(agt,"microsoft") 

if not ie then ns = InStr(agt,"netscape”) + InStr(agt,"mozilla”) 

win = InStr(agt,"win") 

mac = InStr(agt,"mac") 

%> 
Then wherever you want your browser-specific code to appear: 

<% if ie and win then %> 
IE Windows HTML in here 

<% elseif ns then %> 
Netscape Code in here 

<% else %> 
Any other code in here 

<% end if %> 
Since all this processing occurs on the server, there is nothing for your user's browser to 
do except display the HTML. Most convenient. You can hone this code yourself by 
looking at the variable agt on different platforms and seeing what they return. 
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ANTONY 
BORN : 23rd June 1961 - 12:20pm 
ANT'S ASCENDANT : 


Ant's ascending sign is Virgo which means that Ant is a bit of 
8 purist who likes a lot of structure in his life. He's the picture 
of cool - an observer who picks up on all the little details in life 
and relationships but could often do with injecting a bit of spice 
to liven things up. 


Ant tends to attract the hippy dreamer sort of gal who's looking 
for someone to take care of her, when he could actually do with 


a bit of a bright spark to come and shake him up a bit! 
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1. The [w] www.saveoursheep.com site was created to promote 
the PC/PlayStation game, Sheep. Amusing graphics and 
quirky sound effects make the site appealing 

to all age groups and player types. 


2. Not surprisingly, sites like [w] www.officialblue.co.uk, are 
popular projects. “Working in the entertainment sector is a 
favourite with the development teams,” says Ben Adams, a 

producer at Matinée. 
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"SHEEP", created by Mind's Eye Productions Ltd for Empire interactive Europe Limited, 
is available 17th November on PC and PlayStation (1). 


ORDER NOW 
click here 
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“Dreamweaver allows our creative team and developers to work 
together to produce working designs with minimum hassle,” 
says Ben Adams at Matinée. That’s why it’s embraced version 4 


with open arms... 


atinée likes to show off. It doesn't house its 
company under one roof, it musters its 
full-assault Web design and multimedia 
empire under five of them in the heart of 
Reading in Berkshire. And it doesn't just spin together 
simple Websites, it provides the complete gamut of 
audio, visual, and interactive experiences. 

Starting life as a recording studio in the basement 
of MD Chris Broderick’s house in 1982, Matinee 
became something of an audio/video specialist with 
in-house studios and AVID editing suites. 

As the Web grew to become a more interactive 
venue for sound and vision, Matinée found another 
home in Web design, particularly specialising in 
creating Flash elements for a greater whizz, bang, 
wallop effect. 

So it’s no surprise that the company has now added 
the new boy band Blue ([w] www.officialblue.co.uk) 
and 80s pop combo Culture Club ({w] www.culture- 
club.co.uk) to its roster of clients. They help to take 
Matinée’s Web work across a range of business sectors 
that also includes IT, pharmaceutical, and 
manufacturing. “Of course, working in the 
entertainment sector is a favourite with the 
development teams,” admits Ben Adams, expert 
producer at Matinée. “It provides us with interesting 
content, and high profile or famous clients. Oh and the 
freebies are better too...” 


But whether the Matinée development team is 
constructing Boy George or satellite products 

([w] www.ctter.co.uk), the Web is the Web and it'll be 
using Dreamweaver. “It’s the best — say no more,” 
opines Ben. “When a new media comes out — an 
Extension comes out to aid our development. It still 
isn't perfect when designing framed sites, but | don't 
know any alternative that is better.” 

It’s Dreamweaver's ability to keep up with the game 
that makes it a winner. “It evolves with the Web,” says 
Ben and that, in a nutshell is why Dreamweaverstill 
rules the Web editor roost. Keeping abreast of Web 
developments is essential for a company like that 
Matinée that, by its own admission, “likes to push the 
boundaries of what is possible.” Witness its Sound 
Design Website that illustrates the importance of 
different sounds in video games (Matinée also 
produces soundtracks and sound effects for console 
games) and makes use a vast tract of different media. 
“We challenged ourselves with a complex design and 
frameset which required multiple media types to 
communicate across frames, and control one another,” 
reflects Ben. “That was hard, but we got there.” 

Matinée uses Dreamweaver for all the HTML 
aspects on its sites. Ben has no doubts that “it's the 
best tool for laying out Web pages. It enables our 
creative team and our developers to work together to 
produce working designs with minimum hassle. A > 
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great feature is the customisability and expandability 
of the product. Some of the Extensions available save 
so much time and effort.” Matinée makes heavy use of 
the Flash Extension, especially the Macromedia 
Javascript Toolkit for Flash that includes the Flash 
Dispatcher and Flash Player controls. “We still work a 
lot with Flash, so anything that helps us integrate faster 
is good in my eyes,” explains Ben. 

Saving minutes and reducing sweat and toil is good 
news for a company like Matinée that’s handling a 
stream of big clients. Working to tight deadlines still 
causes the biggest grumbles for Matinée’s developers 
and the entertainment Websites often have to be 
changed at the last minute. “The nature of the music 
industry especially means that content is changing up 
to, and after the launch, which can be quite tricky to 
manage,” says Ben. When a tool like Dreamweaver 
makes a job go more smoothly it’s bound to win friends 
because, as Ben acknowledges, “up-to-date content 
sure as hell makes for a good Website.” 

Dreamweaver 4 has kept its solid foundations intact 
while making some neat improvements. Ben 
particularly likes the improved HTML code editor, 


Welcome to the 


Official Website 


1. [w] www.culture-club.co.uk, the official Culture Club site, has MP3 music files and QuickTime 
movies embedded in its HTML pages. 

2. You can find Matinée’s sound, design and animation services at [w] www.matinee.co.uk/games. 
3. This site was developed for the Satellite Global Area Network company, Ottercom. 

4. Matinée's Events and Video department comes up with presentations for AGMs, product 
launches, conferences and outdoor events. 
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Code inspector, which handles more easily thanks to a 

number of discreet refinements that include better 

syntax definition and character display. He also finds 

the switchable Layout/Standard view helps in 

developing closely-designed pages. “It’s like using 

| Wireframe mode in Flash: it lets you see things that 
you wouldn't notice otherwise,” he says. Finally, 
moving away from the detailed coding, “the on-line 

| O'Reilly reference is a joy to use.” UltraDev, despite 

| being a good product, isn't something that Matinée has 

any great need for. 

If Macromedia could solve the age-old browser 
problem, it would be the icing on the Dreamweaver 
cake. The biggest headache for the Matinée team is 
getting its complex designs to look right in all 
browsers. To keep everything looking good, most 
Matinée sites use complex browser detection scripts 
to ensure that everyone is seeing the same picture. 
Some things never change. Cross-compatibility is still 
a problem. Dreamweaver still rules. Live with it. EEE 


5. A screen from Matinée's AV site - the company is something of an audio/visual specialist with 
in-house studios and AVID editing suites. 
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COMMUNICATING INNOVATOR 


Ottercom's technology provides the essential ingredients for the 
converging global communications environment . providing the 
tools to communicate anytime and anywehore. Specialising in 
state of the art solutions that assist companies to gain and 
maintain competitive advantage. With products fanging from 
sophisticated portable satellite terminals for high-speed data, to 
all-embracing telematics solutions. 


Our Approach 


We believe that these disciplines should not be viewed in isolation. Effective communication 
is an integrated, constantly evolving and technologically converging process. That is why our 
intemal structure reflects this ethos: to provide a ‘business offering’ that allows our clients to 
utilise our expertise for not only Events and Videos but to be confident in the knowledge that 

'| they can integrate expertise from any of our core competencies, to build @ brand experience 
that is both unique and relevant to their needs. 


S previous 


9 . . 
* Animation 


Join the revolution - the world of 3D graphics and animation. From simple 
animated corporate logos, movie-quality fly through’ sequences to realistic, 


virtual ‘talking heads’. 


With the relentless increase in sophisticated software and hardware, animated 
graphics have become more pervasive through their unique ability to educate 
and entertain in the business world. Are people going to notice your marketing 
message if your competitor's business communication is more dynamic and 

captivating? In today’s competitive environment, the use at animation is now » 


pre-requisite, 


Naturally, our dedicated creative team, of three in-house animators, can 
dramatically create impact with a great idea. However, this Is only one part of an 
intense business-centric process. Our ideas are designed not only ta integrate 
stunning audio-visual vtimuli but also to energise and focus your message, by 


using animation to engage your target audience. 
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How Matinée adds 
Flash to its Websites... 


In the left corner it's the Viscount of Vector — Macromedia Flash, and in 
the right corner, Harry ‘The Adaptable’ HTML. Let's stop the sparring 
and get these two heavyweights working effectively together 


( lash is fast becoming a 
\ standard on the Web, with 
more and more sites 
utilising its rapidly 
increasing set of skills. On the flipside of 
the coin, there is also a resurgence of 
highly designed HTML sites out there 
too. This has come about through the ebb 
and flow of market forces — users 


it 


wanting ease of adaptability, users 
wanting amazing animation... 

But hey, are we missing a trick here? 
What about getting these two to work 
together in a perfectly formed whole — 
the best of both worlds. This set of 
tutorials explains how to effectively add 
Flash to your Websites. Included is a 
tutorial on how to utilise a new Extension 


to help your user develop plug-in 
detection and installation routines. 
Second is a basic overview on how to 
add Flash to a tightly designed site, 
ensuring a seamless transition between 
Flash and HTML content. Put these two 
things together with the other articles in 
this issue, and you are halfway to 
developing award-winning content. > 


Dreamweaver Special 


Sound Design 


[o] Visual Services 


) AST TINE 


Matinée Group Services site 


Part 1: To Flash or not to Flash 


Before committing to Flash, commit to your users first. Ensure that Flash is really 
necessary, and that detection or redirection ‘countermeasures’ are in place 
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th Dap Behr 
1] Countermeasures? That sounds complex! 

Well it used to be, but it’s been made a lot 
easier with the addition of a bunch of new 
Extensions from the Dreamweaver Exchange. 
Download and install the JavaScript Integration Kit 
for Macromedia Flash 5 from the Dreamweaver 
Exchange and you are ready to go. 
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Begin by making a new page in Dreamweaver 

(File/New) and set its background colour to 
follow the scheme of the Website (Modify/Page 
Settings). This limits any ‘screen flash’ that occurs 
depending on how fast the detection takes place. 
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Next is an option that checks for specific 
versions of Flash, and whether to upgrade an 
existing installation. Where possible, you should 
export your Flash movies as version 4 (Actionscript 
allowing), because this is the most commonly 
installed version of the plug-in, and limits 
unnecessary downloads of the Flash plug-in. 
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Macromedia Flash Dispatoher Behavior 


B The Flash Dispatcher reliably enables 
Dreamweaver users to check the user's 
capability to play Flash, and if they can't, then it 
helps them upgrade their browser's capabilities or 
redirects them elsewhere. The behaviour can be 
added to a link, or as an ‘onLoad’ script that 
activates as soon as the page loads. 


{Behaviors 


(Wan 

Je =| 
Advanced Form Validations 
Advanced Validate Form 


body > Actions 


Control QuickTime 4.1 
Control Shockwave or Flash 
Drag Layer. 

Go To URL 

Jump Menu 

Jump Menu Go 

Layer 


[8 | Select anywhere on the page, and open the 
Behaviours panel (F8). Select the '+' icon to 
add a new behaviour, and select Macromedia Flash 
Dispatcher Behaviour. This action adds a JavaScript 
behaviour to your page that checks for the existence 
of the Flash Plug-in and which version it is. 
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8 | If all else fails, then the final settings come into 
play. Choose either to redirect users to the 
standard plug-in download page, or to a page 
proclaiming defeat, chastising the user's browser or 
more sensibly, to an alternative page which explains 
that in order to install Flash, users may have to talk 
to their IT dept. 


© neal Mactomedia 
Flash Player 
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For this example, we are using an automatic 

redirection page that takes users either to the 
Flash-ed pages if they have the specified plug-in, or 
to a page enabling them to install or upgrade their 
plug-ins when required. 


6 | The first set of options are Flash Content URL 
and Alternate URL. These tell the browser 
where to navigate to when Flash is detected, or not, 
as the case may be. Select Browse and find the 
relevant file on your Website, for both the Flash 
content areas, and the alternate (which could be an 
HTML-only section, or a Get Flash Page). 


Culture Club 


9 | So it's as simple as that. Ensure that all settings 
are filled in, and select OK. This adds a 
behaviour to your page with the ‘OnLoad’ Event 
handler, causing the script to action as the page 
loads. If ‘OnLoad’ is selected, click on the arrow 
next to the event handler and select ‘OnLoad’. If 
this is unavailable, ensure 'Show Events 
for...Version 3.0 Browsers’ or above is selected. 


Part 2: Embedding Flash content into your Web pages 


Users are now ready to view your content. This 
is where we give them something to look at... 


Recent Matinée 
sites: 


[w] www.matinee.co.uk/av — 
Matinée audio/visual services 
[w] www.matinee.co.uk/games — 
Matinée sound designs services 
[w] www.matinee.co.uk/events — 
Matinée events & video dept site 
[w] www.officialblue.com — the 
official site of boy band Blue 

[w] www.saveoursheep.com — 
Sheep PC/PS game official site 
[w] www.culture-club.co.uk — 
official Culture Club site 

[w] wwwootter.co.uk — satellite 
GAN product site, ottercom 


© As always, preparation is key. Plan your Web 
page/site beforehand in both design and Adding a Flash movie to your HTML content is 

layout (we use Photoshop), and plan in your head simple. Just select the location you want to add 

where each technology sits. Develop the Flash with the Flash to, and click on the Flash Object icon. 

this in mind, and ensure that the edges of the Flash Select the file you want to add to the page (an .swf 

movie sit nicely within the HTML. file). Click Select, and that's it: Flash is on your page. 


G Make sure that you have set the background 
colour of the Flash movie (the option entitled 
Bg) to match, or at least so that it’s fairly close to the 
background colour of the HTML it will sit on, or the 
BG image. This minimizes any screen flash that 
occurs when the Flash loads after the background. 


4 | The first thing to do is to name your movie so 
that it can be easily identified, and so that 
Javascripts can see it. Do this by typing an identifier 
in the box to the right of the Flash logo. 


(Qreeoe ecu wee at abet ut, Oumcan, Antony. 


| Semen et Lew 


Dace car bm a tyre frou wera ak yond hare 
‘aed we ake esa 8 Lard pny w pene, Ce kt 
none vate 


= eal —~ 8 | Other settings that can ensure perfect 
When trying to make a perfect fit, ensure that positioning within the Flash settings are 
Exact fit is selected. This takes into account the — Width, Height, Vspace and Hspace. Set the Vspace 
stage size, and the dimensions in the Width and and Hspace to 0, which prevents borders from 
Height settings. Show all shows more than just the occurring. Set the Height and Width to be pixel 
stage so that you can spot any anomalous objects perfect for your design, or if a scaling design has 
which are positioned off stage. been made, use percentages in Width and Height. 


3 | A large grey Flash designator box should now 


be visible on your screen. This enables you to 
customize your Flash movie, to ensure that it does 
what it's meant to, and sits where it is meant to. 


6 | The hardest part of utilising Flash within a 
complicated design is getting it to butt up to its 
other content. There are a number of techniques 
that can help with this. The first is the Scale option 
in the Properties box. There are three settings for 
this: Show All, No Border and Exact fit. 


9 | Use layers (where technology allows) to 
position media types with absolute precision. 
Dreamweaver has a great function that enables you 
to play the Flash content within the editor. This 
allows you to position your Flash accurately, without 
repeat testing. FEES) 
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Layout and page design 


Your Web page looks great on paper, but when you try to recreate it in 
Dreamweaver, the HTML won't do what you want. Sounds familiar? 

Then join our whistle stop tour of wraps, cuts, boxes, bleeds and other 
common design niggles... 


raditional design relies 
Y heavily on features like 
precise positioning, grids, 
lines, boxouts, bleeds, 
wraparounds, cut-outs, cut-throughs, 
dropcaps and more, to make it attractive 
and interesting. 

Yet not one of these is directly 
supported in HTML, and you won't find 
buttons for them in Dreamweaver. 
Moreover, every Web designer knows 
that even when you do find a solution, it’s 
a hassle getting it to look the same onall 
the major browsers and platforms: IE 4 
and 5, and Netscape 4 and 6, each on PC 
and Mac; and now TV and games 
consoles to boot. 

The worrying upshot of this is that 
many designers decide to forget the 
fancy layout, and focus on the Flash and 
graphics, with the result that a great 


many Web pages are less great than they 
could be. You can see it across the Web, 
from massive media portals to small 
company brochure sites. 

However, it is possible to achieve all 
of these in HTML, providing you know 
how. Usually Web designers start by 
designing their page in Photoshop, 
Fireworks or another intuitive design 
app, and then recreate it as closely as 
possible in Dreamweaver, cutting out 
and importing interface graphics. 

This is exactly what we're going to do: 
we've already created our ideal design in 
Fireworks (with the added advantage that 
everything remains editable) using 
traditional features that are harder to do 
in HTML. We'll show you how to recreate 
this design in HTML, plus all the key 
layout techniques needed to create Web 
pages that match your visualised design. 
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Part 1: Positioning, boxouts and type 


We'll kick off with the basics of laying out pages in Dreamweaver. Skip ahead if you already know this... 


CD files 


Before we start, you need to get 
the files off your CD. Set the 
folder up as a new site in 
Dreamweaver - check the 
documentation if you don't know 
how to do this - and create a new 
document. The first file is called 
interface.png, or you can use the 
TIF version with Photoshop or 
another app. 
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@ The idea of using tables is you can set the 
exact height and width of each space, or cell, 
in a table. You put your text in a cell, decide how 
wide you want the column to be, and set that as the 
width of the cell. Decide how far you want it to be 
from the edge of the page, and put a cell in there 
with that width to push it out. Images likewise. 
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Click Modify>Page Properties to set basic 

features like the background colour, main text 
and link colours and page margins. We're using 
#DCE29C for the background, and 0 for all four 
margin settings to make calculations easier later. 


i 


Use Insert>Table to add a table, then use your 
Inspector to adjust widths, heights and so on. 
All cells in the same column have the same width, 
and all in the cells in the same row have the same 
height. To get different sized cells, you can merge 
them — drag-select and hit M. You can also give 
them different background colours, and put tables 
inside each other. 


Font Verdana, Aial Helvetica, eans-eerd ae 
Siee. fiz [owes] Wei [J 


You can control text using the settings in your 

Inspector, but the CSS (or Style Sheets) palette 
offers much better control. Click the New icon, 
choose Redefine HTML Tag, set the dropdown to 
‘td’ (which means a table cell), and set a font, size, 
colour and so on. We've used 12 pixel Verdana Arial 
Helvetica, black with a 17 pixel line height. 


Using Cell Spacing and Cell Padding, you can 
automatically create space for margins and 
gutters without having to create new columns and 
rows. This is the easiest way to create a box: first 
make a cell black, then put a 1x1 100 per cent-wide 
table with 5px padding and 1px spacing inside it 
and give the new cell a lighter background colour. 
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G Now's a good time to create a few more styles. 
This time choose Make Custom Style, type 
.subhead in the name box, and make the style 14px 
bold, or something. You'll see your style ‘subhead’ 
appear in the CSS palette. Now you can just select 
any bit of text and click the style to apply it. 


Part 2: Lines and edges 


Line and space is a key counterpoint in traditional design, but in the absence of a Line tool, you'll need to 
know the techniques available... 


Often in layout design you want just a single 

line, rather than a box. You can use the HTML 
horizontal rule (in your Common Tools box), but this 
doesn't offer much in the way of control over 
appearance, and it has no vertical counterpart. 


For vertical lines, you can use the cell spacing 

boxout technique, but set the Cell Spacing to 
O, and instead make the inner table just 1px thinner 
than the holding table. Use the Horz setting, which 
means horizontal alignment, in the holding cell to 
set which side the line appears on. Make it 1px 
wider again if you want both sides. 


This won't work so well with horizontal lines, 
because you can't exactly control the flow of 
text and therefore the heights of cells, on different 
systems. A more solid technique is to create rows or 
columns 1 pixel wide, with a black background 
colour. You'll notice a problem with this, though.. .> 
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4 | If a cell is empty, Netscape won't display it or 

its background colour at all, so Dreamweaver 
automatically includes a space character in every cell 
(you'll see &nbsp; in the code), until you put 
something else there. This creates space in the cell. 
Instead you need to put a 1x1px transparent GIF 
image in there. 


5 | This won't work with Cell Padding either, so 
you may need to create space above and 
below your lines another way — either with a soft 
break (Shift+Return), or by adding an empty row. 
You might want to put your 1px GIF in there too — 
you can set its height to 5 or 10px say, and the 
browser stretches it to hold the space at that height. 


By stretching the graphic and colouring the 

cells, you can use invisible image technique to 
quickly create precise and controlled spaces and 
lines, to achieve your final layout. Another 
attraction with this technique is that it's robust: 
you'll get good results in all the different browsers. 


Part 3: Backgrounds and stretchy graphics 


Web pages continually change shape and size, depending on your 
viewer's browser, so you need to be able to create stretchy graphics 


|FRESHTOMATO.NET // new media : 
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a The idea of Web, just like print, is to sort out 
your grids, layout and copy within 
Dreamweaver, and then bring in images and 
graphical elements from Photoshop, Illustrator, 
Fireworks or similar, to add specific visual features to 
your design. 
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4 | Instead, you can create seamless tile graphics, 
and use HTML's background setting, which 
repeats an image as many times over as it takes to 
fill the space. You can set a background image for 
your whole page in the Modify>Page Properties 
dialog, or you can set it just for a table cell using the 
bg slot in your Inspector. 


One clear difference, though, is that it's 

essential to keep file sizes as small as possible 
on the Web, for short download times. Image files 
are relatively large byte-wise, which means reusing 
graphics files wherever possible. Your viewer only 
has to download a file once, even if it's in your 
design 100 times over. Here, the lines in the 
background are created by a single, small file 
repeated crossways many times over. 


5 | Again, though, Dreamweaver's CSS Style 
Sheets offer a much more powerful and trusty 
solution. Create a new style called .wobblyedge, 
and click the Backgrounds tab in the Style editor. 
Here you can set whether the tile repeats or not, 
and choose whether it goes in just one direction, 
scrolls with the page, or has an offset. 


Another feature unique to the Web is that your 

page is always changing shape and size, 
depending on your viewer's browser and the size of 
text on their platform. So you need to be able to 
create stretchy graphics. HTML-based design 
features naturally tend to be stretchy, but graphics 
don't look good if you distort them. 


6 | Tiling isn't the only reason we're using a 
graphic for the heading lines of our interface: 
HTML backgrounds also offer the most reliable and 
effective way to flow one interface element over 
another, or superimpose graphics. If we'd used lines 
created from cells, we'd only be able to run them up 
to the edge of the rectangular frog image file. 


Part 4: Creating a grid 


Let's get going on the actual design: first we need to create the main grid and template 


Tables 


We're going to use tables as our 
main tool for positioning - like 
text and picture boxes in 
QuarkXPress. You might be 
tempted to use layers, but tables 
are a better bet. Unless you know 
a great deal about the different 
browsers and layer technology, 
layers are likely to give youa 
nasty shock when you come to 
preview your layout on someone 
else's computer. 


Kite 3 ail Mies) Sinisis) iy Saisie! 


This is the difficult bit. You'll need 

Dreamweaver, your graphics app with your 
interface design, and your browser open all at the 
same time. Open a fresh document in DW, set up 
your basics, then take a look at the interface design 
and work out what the main table areas will be. 
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4 | In the top cell, add a new 2x2 table, 720px 

wide, and set the columns to 260 and 460. 
Then merge the right-hand pair and put the frog. jpg 
image in here. Set the height of the top left cell to 
113px, set its Vert (vertical align) to bottom, then 
put the heading.gif graphic in here, and set its V 
Space to 10, to lift it above the baseline. 
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@ Use your cursor keys to move through the 
cells, setting the colour of the first and second 
last to #5E5F4F, and the last to #979692. Click 
View>Table Borders to hide them for a better 
preview, and see what you've got. It should look 
something like this — if not, check what you've got 
against our file on the CD. 


Here you can see how we're going to divide 

things up: one big cell to hold the top area, 
using tested tables, and then one for the main 
content and update area, and one for the 
navigation. The paler lines show how we'll break up 
nested tables. All the HTML should come to no 
more than 10K. 
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Gg Set the background colour of the empty cell 
below this, and set its Vertical Align to Top. 
Then put a new 2x2, 100 per cent-wide table in 
here, and set its height to 169. Turn the top row of 
this into a 1px line, using a transparent GIF and 
setting the height of the image and the row to 1px, 
and set its colour to #5E5F4F. Create a vertical line 
with the left cell in the same way. 
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- Directly underneath this table, in the same cell, 
add a 1x2 table, 525 wide. Turn the first cell 
into a 1px outline, and add the corner1.gif image 
aligned right in the other cell. Finally, add the 
bottomshade.gif image as a background image to 
the second cell, using the Browse button from your 
Inspector or CSS Style Sheets. 
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Set the background image in place, then create 
a simple 4x3 (rows x columns) table, 720px 
wide. This will hold our whole page. Merge the top 
and bottom three cells into one, then set the widths 
of the middle three to 525, 30 and 165 pixels 
respectively, and colour the left of these #DCE29C. 
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G Place your cursor in the green cell furthest 
down the page: this is the main content area. 
Clear its background colour, set its Vertical Align to 
Top, and insert a 525px, 5x5 table with the previous 
colour as its background colour. To hold its columns 
exactly in place, you need to put a 1px transparent 
image in each cell along the bottom row, and set 
their widths to 1, 40, 481, 1 and 2px. Merge all the 
cells in the first and last two columns. 
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» Home 
» Home 
» Home 
» Home 
» Home 


9 | That's almost it for the grid: you just need to 
add your navigation. We didn't use tables for 
this at all, just style sheets with a graphic for each of 
the headings. If your page looks wrong, check it 
against the one on the CD, 4.9.htm. > 


Part 5: Wraps, bleeds and cuts 


Cut-throughs, like the frog in our interface design, are just like bleeds, only more complex 


Computer Arts 


forum 


If you get stuck, don't worry: 

head back a step or two and see 
if you followed the tutorial 
correctly. If you're still stuck, 
head to the Computer Arts forum, 
[w] www.computerarts.co,uk/ 
forum, where you can see if 
there's any messages on the 
subject, or post your own. 


c “ Sere 
EY] The grid we just created is fairly complex, not 

least because of the large frog jutting out of 
the main body table, and the die-cut effect in the 
bottom corner. It isn't easy in either case to get text 
to wrap around, but usually this is no problem: just 
select the image and set Align to Left or Right in 
your Properties Inspector. 
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4 | One way round this is to approach the design 

in a different way: here we've aligned the 
image left, and allowed it a margin. The space left 
and right of the image is created using the H Space 
setting at 15px. Make sure the text lines up tidily on 
the left by applying a CSS style with margin-left set 
to 20px to the paragraph. 
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The only problem with using the HTML Align 

Left and and Right settings is that the browsers 
automatically create a small margin of about 2px, 
either side of the image or table, which makes it 
difficult to ‘bleed’ an image against an edge and run 
text round it at the same time. You can see here the 
issues it creates. 


: 3 

If it doesn't look right, drag-and-drop the 
image right at the beginning of the first 

paragraph. If you want to include a caption below 

your picture, put the whole thing, image, caption 

and all, in a1 or 2-row table, and use the Align 

setting for the table instead. 


5 | Cut-throughs, like the frog in our interface 
design, are just like bleeds, only more complex. 
You need to include a portion of the interface below 
in the graphic file, and then construct a careful grid. 
If you want a wrap around, try creating the layout 
borders as a background image file. 


G This is a similar technique to the one we used 
for the shadow at the bottom of the page in 
the interface design, to make the die-cut effect 
possible. Although the background graphic seems 
large, its file size is less than half a KB: just a few 
sharp, flat colours compress well as a GIF. 


Part 6: Completing the design 


So now we've made the grid, and explained how to get the results you're 


after. All that's left is to add in the content... 
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The page title and intro area is created using a 

single table of two columns, 100 per cent wide 
with 12px cell padding. The heading itself is a 
graphic (you'll have a job trying to get HTML text 
on its side) and the spacing of the columns is 
automatically balanced. 
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The section heading is a simple, coloured-up 
cell with HTML text and a CSS style applied, 
although you might want to use graphics or try 
another cut here. The table that holds the images, 
meanwhile, is two rows by three columns, with 
10-pixel cell spacing to control the positioning. 


Finally, combine the right-most two cells of this 
table and set Align to Top, for the text. Put 
your images in place, and you're done. EEE 


hou do YOU Find the right Font? 
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t a fe way to preview fonts, put them into convenient sets, and activate them with one click. With Suitcase 9 


Working with fonts can be hit or miss. Whether you have ten fonts or ten thousand, it’s tough 


to find the one you need. Suitcase 9 takes the guesswork out of choosing fonts. It's the fastest, easiest 


- a SUITCASE 9 Network Edition, members of your workgroup can use the same set of fonts — whether they're 
| vsti across the room or around the world. Improve your aim. Get Suitcase 9. 


Get Extensis Suitcase 9 online at: 


mw. WUU.extensis.cON/SUICAUK Extensis 


Copyright 2000 Extensis Products Group, Inc. All rights reserved. Extensis, the Extensis logo and Suitcase are trademarks of Extensis 
Products Group, Inc. All other trademarks are the property of their respective owners. Extensis Products Group, 1.800.803.6921, 
503.274.2020, Fax: 503.274.0530. Extensis Europe, Unit 3, Bouverie Court, The Lakes, Northampton NN4 7YD, United Kingdom, tel: +44 
(0)1604 636 300, fax: +44 (0)1604 636 366, info@extensis.co.uk 


Expertise provided by Mark Towse 
[e] mark@bigimpact.tv [t] 01753 
889435. Macromedia's UltraDev 4 
for Mac and PC costs £469, for more 


info goto [w] www.macromedia.com. 
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Idiot's guide to 
database driven Websites 


We take you through connections, DSNs and setting 
up a personal Web server 


here are huge benefits to 
} using UltraDev or any of the 
{i myriad of capable database 
i Website creation tools out 
there. There are so many elements which 
need to be spot on in order to get things 
working, though, that you might feel that 
a lot of what you do is a bit hit and miss. 
This tutorial aims to take some of the 
uncertainty out of using UltraDev. We 
take you through connections, DSNs and 


setting up a personal Web server 
properly, telling you exactly what's going 
on at each stage. 

With a little applied knowledge, 
you will understand how all these 
elements combine to create stunning 
database driven applications for 
the Internet! 

And while databases are useful, 
they're not much in the eye candy 
department unfortunately, hence the 


Illustration: arbernaut [w] www.pixelsurgeon.com 


fairly uniform screenshots. Please note 
that this tutorial is necessarily written 
fora PC perspective, because over 95 
per cent of database driven Web 
applications are created on PC, to be 
hosted ona PC server, to be viewed by a 
PC audience. 

The concepts for Mac users are all 
similar, but you'll need to read UltraDev 
documentation regarding installation of 
the Personal Web Server equivalent. 


Part 1: Personal Web Server 


We are going to choose a directory which PWS will operate like a real Windows NT server 


PC-centric 


Users shouldn't feel short 
changed, it's just that there are no 
viable Mac Web servers 
commercially used on the 
Internet: thus database 
applications (and most Websites) 
will always be PC-centric. 
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On your hard drive, if you see a folder called 
‘c:/inetpub’ then you are all set. If you can’t 
(which is more likely), because it isn't installed on 
any version of Windows as standard, then whip 
out your operating system CD-ROM. When the 
auto-into sequence appears, close it. 


6 Web applications, database driven or 
otherwise, have to be written to work on the 
server which will ultimately host them. Most of the 
time, especially for database work and ASP scripts, 
this will be on a Windows NT server or a Unix or 
Linux-based clone. Open Windows Explorer. 


A shortcut to PWS should be created 

automatically. Double-click on it - you have 
the option to start. Click on this and then click on 
Advance. You'll get a scary-looking Windows tree, 


but don't worry, you will never need to delve into 
this stuff. 
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Click on Edit Properties. We are going to 

choose a directory which PWS will operate like 
a real Windows NT server, with all the trimmings 
except CDONTS (which is used as an email client). 


Make sure that Read (enables you to read files 

from the directory), Execute (enables actions 
to happen between pages and databases) and 
Scripts (enables non-database scripts in ASP to be 
used and viewed via your Web browser) are all 
checked. Now you are all set, and can minimise 
PWS. It needs to remain active in the background 
when you want to view pages. 


When you are working on a different site 

within U/traDev or from manual coding, you 
need to edit Properties in PWS every time you are 
on a different site, so that PWS can change the 
directory it uses like an NT server. 


ee 


Now browse the CD using Explorer. On the 

CD-ROM go to: Add-ons>pws >setup.exe. Go 
through the installation process, and you will be 
able to return to Explorer and see a brand new 
directory called C:/inetpub. 


G Here you will see a default directory. The site 
you work on must always be stored in the 
‘web-root'’, which is a separate folder within 
‘C:/inetpub', named wwwroot. So the actual path 
to the site you are working on would be 
‘C:/inetpub/wwwroot/websitefolder’. You can 
browse and create a directory to select. 


Windows NT users have a version of PWS 

pre-installed, but you will need to create your 
own shortcut. The only difference is that it is called 
Personal Web Manager. Mac users have an 
equivalent ‘mock’ NT server, which comes with the 
UltraDev CD-ROM. Full instructions are contained 
within the U/traDev user guide. Click tour on PWS 
to find out more about the functionality it offers. > 
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Part 2: Connections and DSNs 


We'll set up a connection of one or more DSNs to link our database up to scripting 


Recordsets 


Recordsets are a set of records 
retrieved from a database using 
various rules defined in ASP 
pages SQL rules. 
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G A connection actually links up a database 
stored somewhere else on your computer and 

acts as a communication device. You don't need an 

expensive high-end production tool to create these 

connections. Enter ‘my computer’. 


4 | Click on the system DSN tag. Here you will see 
any DSNs (Data Source Names) which have 
already been set up on your system. If you use other 
database-producing software, then you'll recognise 
these boxes, because this is where your software 
hands over to your operating system's in-built data 
source handling tools. 
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The standard installed drivers should meet 

your every requirement: Access, SQL Server, 
Oracle, Excel, Paradox and Fox Pro, but extras can 
be added, should they be needed, in from the 
database manufacturer's Website. 


2] Now go into the Control panel. You will see 
a folder called ODBC Datasources. 
Connections mean that external scripting such as 


CFML, JSP and ASP is capable of interacting with a 


database, enabling you to use information 
contained within a database. 
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We will now add a DSN, which forms the link 
in the connection from the database to the 
DSN. The DSN is actually accessed by external 
commands, from scripting or programs or other 
methods, and the DSN then connects to the 
requested information in the database. Click the 
‘Add’ button in the System DSN folder. 


8 | Select your database's relevant driver and click 
Finish. Now a driver has been selected, you 
can name your DSN (Data Source Name). You do 
not have to name this anything special, but do use 
alphaNumeric characters. This is a safety measure 
because some Web servers use third party software 
to mimic a certain other type of server's features, so 
your NT or SQL server plan could be handled by an 
incompatible old Unix server. 
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o Double-click on the ODBC Data Sources folder. 
You will now see the magic box which enables 
you to make database driven Internet sites and 
applications. We are interested in only two of the 


tabs along the top of the dialog box: system DSN 
and Drivers. 
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You will now see the Drivers folder. This is 

where you select a driver for the relevant type 
of database you have. Over the Internet, the most 
common is Access, which should be stored on a 
Windows NT or 2000 server. Most other ‘normal’ 
database drivers should be installed as standard. 
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9 | Type in a name: we suggest making a prefix of 
‘dsn’ so you know exactly what this element is 
when your scripting is pointing to it. Anyone else 
working on your pages will then know that it's a 
DSN even if they haven't made the connection. You 
can add programmer notes in the description box, 
but this can be left blank and has no effect on the 
correct functioning of your applications. 


Part 3: Accessing databases 


Now the DSN has been created, we need to tell it which database it is going to access for information 


Email functionality 


If you want to add email 
functionality to any pages using 
CDONTS (the email client on NT 
servers) you will have to use a 
real server with the full version of 
NT server to test your pages: this 
is beyond the scope of Personal 
Web Server. 


Make sure the database is located in the same 

folder as the Website or Web application you 
are working on, somewhere in the Personal Web 
Server, from section one. Mac users, locate to your 
equivalent location. We recommend that you use a 
separate folder within this location called ‘data’, so 
the database is permanently kept on its own. 


t] You can use multiple DSNs in your 
connections, but each DSN can only be 
attached to one database. Click Select, and use the 
windows to navigate to your database. 


So far we've covered a bit about the 

background, and looked at how it all works. 
Now open U/traDev and let's see what it does 
with the DSN you manually created, to create a 
fully-fledged connection. A Connection is a 
collection of one or more DSNs which link databases 
to scripting. Even though many Web apps only use 
one DSN, you can use hundreds, and connect to 
more than one entirely different database. 


4 | Click OK again. You will now be able to see 
the DSN (Data Source Name) which we have 
just set up. You can now do this manually on any 
project or continue to use the in-built facilities of 
your application creation software. 


2 ae 
7 Right-click on the right-hand side of the 
page and select ‘new file’. Name the file 
‘connTest.asp’. We are going to see how UltraDev 
makes our DSN available to all the pages on a site 
we are working on. 


Double-click on the newly created file. We are 

in split screen mode, which isn’t strictly 
necessary. Go to the Modify menu and select 
Connections. A connection has already been made 
with the database and we are now making it ‘live’ 
on our Web pages. 


Click OK. You will see the name of the 


selected database in the grey area, below the 
two white input boxes. 


Create a new Website (Site>NewSite) and 
make it a blank location somewhere in the 
‘wwwroot’ of Personal Web Server. We recommend 

that you set the site up in the same directory in 
which you linked the database to the DSN earlier. 
This isn't absolutely necessary, but makes life easier 
when you transfer any applications to a real Web 
server. Select ASP 2.0 and VBScript as the language. 
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9 | Click the ‘new’ button which appears in the 
new dialog box. You will be offered either a 
new DSN or a new Custom Connection String. You 
are more likely to use the Custom Connection String 
for creating a DSN-less connection, but more about 
those later. Select the new DSN tag. > 
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Specified DSN 


Before hosting your Website with 
an NT hosting plan, check that 
you can set up any DSN which 
you specify, not a predetermined 
one from a shared server. This is 
important, because otherwise 
you'll have to manually rename 
every DSN on every page to what 
the host specifies. 
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Type in any name as the connection. It is 
always a good idea to precede the name of the 
connection with ‘conn’ so you can easily identify it. 
In much the same way, preceding a DSN with ‘dsn’ 
will enable anyone working on your pages manually 
to know exactly what everything is called. 
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ASP works in such a way that whenever you 

access any database information stored ona 
page, you have to type in an explicit opening of a 
connection to the database, also specifying the 
name of the DSN you will be using (U/traDev does 
this automatically). Click Site>Site files. You will now 
see a new folder, created automatically. 


G The reason we had to set up a DSN manually, 
is that when you actually transfer files to an NT 
server, or UNIX clone, you won't have Ul/traDev 
installed for you. This means you will have to use PC 
anywhere or a bespoke console, which many hosts 
have, to create your DSNs. Now you know what is 
going on, you should get a lot less ‘adodb recordset 
dsn not found’ errors. 
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From the dropdown list, select the DSN you 


created earlier. If you were to click Define, you 


would, in effect, be out of U/traDev and into the 


ODBC control panel where we set this up manually. 


|) TiieName="Connect son_ede_conn_dan.nte” 
Type="abow 


M_connTest STRING * “densbigimp.danCompurar Artes” 


Double-click on the page in the Connections 
folder, then click on Code view with the 
button in the top-left of your screen. Only the 
line without an apostrophe before it is active, the 
one which states ‘MM_connTest_STRING = 
“dsn=bigimp.dsnComputer Arts;"’ is the one doing 
the work. 


The reason we made sure the database 

is stored in the same folder on 
‘C:/inetpub/wwwroot/ is because you need to 
maintain the absolute positioning of the database 
when transferring files, so the DSN points to exactly 
the right place on the hosting server. 


Leave the two radio boxes as they are, as 
default, using the Local DSN. If the DSN has 
been set up correctly, it will work exactly the same 
on an application server anyway. With the DSN 
selected, click test — just to double-check that all is 
well. Click OK twice to remove the dialog box. 


} FileNome="Connection_odbe_conn_den. atm” 
‘Types"ano" 
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M_connTest_STRING = “dan=biginp.asnComputer Actes” 


Instead of explicitly naming a DSN each time it 

is used, which places strain on the application 
server, only one page needs to call the connection 
made to the DSN. Other pages can instead call the 
automatically created connection page, speeding up 
your Web applications. 


So there you have it: a brief overview of 
what you need to get database driven 
pages working on your computer, and exactly 
what is going on in the background, and why, 
so you can hook up to a database and make killer 
Web applications! 
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Computer Arts Photoshop 
Special — COSB0016 

Six PS6 tutorials on vectors, 
shapes and the Liquify tool (and 
more) to familiarise you with the 
latest upgrade, plus in-depth guides 
to the new interface and the best 
plug-ins. On the Web side, discover 
how the bundled ImageReady 3.0 
can transform your graphics, and, if 
you're looking for inspiration, more 
than 30 top artists spill the beans 
in our special feature. 

CD 27 Photoshop plug-ins including 
eyecandy 4000, xenofex and 
Flaming Pear icons plus demos of 
Illustrator 9 and Photoshop 5.5. 


Computer Arts Web Techniques 
Special — COSB0017 

33 pages of new tutorials including 
3D effects in Flash 4, crossbrowser 
code in Netscape 6, connecting a 
database to an existing page using 
Dreamweaver UltraDev 4 and the 
latest features in Fireworks 4. We 
also take a look at the future of 
Web design, the secrets of great 
style sheets and come up with 30 
tips that you'll find invaluable. Plus 
add-ons, resources and profiles. 
CD Demos of Dreamweaver 4 & 
UltraDev, Flash 5, Fireworks 4 and 
Netscape 6 as well as more than 
30 of the best add-ons. 
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Computer Arts Flash Special — 
cosB0018 

10 new tutorials including creating 
the illusion of 3D, making your own 
extensions, using dynamic menus 
and Vecta 3D. Discover how to 
make your site sounds as good as 
it looks in our Sound & Vision 
feature and pick up an ActionScript 
tip or two. Plus profiles on Hillman 
Curtis and HIT Entertainment, the 
creators of the Bob the Builder 
Website, books, reviews and more. 
CD Demos of Director 8, 
Dreamweaver/UltraDev 4 and 
LiveMotion, plus the Java 
Integration Kit and resources. 
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Computer Arts Animation 
Special — COSB0019 

8 new tutorials include: creating a 
walk cycle in Maya; bring your 
objects to life in Flash; how to show 
emotion in Character Studio; 
combining 3D objects and video 
footage in After Effects; animate 
our free gremlin model in Poser and 
build atmospheric scenes. 

We find out how Passion Pictures 
created the Robbie Williams 
character for his latest video and 
look at the CG division at Aardman 
CD A taste of Maya, Poser 4, Flash 
5, Cinema 4D x! 6.1, Retas Pro 
2.5d Animation Stand and more 
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Computer Arts 

Special - COSB0020 

8 stunning tutorials written by the 
leading Photoshop artists: recreate 
the surreal cover image; create flat 
vector shapes without using 
FreeHand or Illustrator; build an 
image gradually using layers; make 
a convincing old screen print effect 
for an illustration; create a focal 
point; the art of promotion. 

Master the art of colour manage- 
ment and a look at the future of 
typography. 

CD 366 Free Photoshop filters and 
extras , and 27 demos including 
Photoshop 6. 


Issue 54 -— Code CA054 
Dreamweaver 4 demo and tutorial 
CD UltraDev 4, Fireworks 4, Maya 
Paint Effects, 151 PS6 brushes. 


Issue 55 — Code CAOS55 

55 free Photoshop 6 patterns 

CD Plus 10 PS interfaces, and Vue 
d’Esprit 2-the full product 


Issue 56 — Code CAO56 

400 free Photoshop filters 

CD Six Reyes plug-ins for 3ds max 
and demos of Aura 2, Expression 2 


Issue 57 — Code CA057 
Colour correcting photography 
CD Double CD issue ! Exclusive 
demo of 3ds max 4 


Issue 58 — Code CA058 

100 ways to design better websites 
CD Merlin 3D, Cinema 4D Art, 
Amapi 3D 4.15. 


+44 (0)1458 271 108 


take out a subscription — see pages 47 & 74 
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Remove detail 
with buZZ Simplifier 


» 


to create 
a drawing 


sisi Software 


“Stunning effects” charles Arthur, Technology Editor, The Independent 


It’s easy to see why buZZ.Professional 1.0 has quickly become must-have software for many 
digital camera users, as it allows them to create paintings or drawings. 


buZZ.Professional 1.0 is a ground-breaking new plug-in. For the first time ever, you can 
remove detail - as much detail as you choose - without losing focus or definition. 


This is vital, as it then allows you to go on and create extraordinary artistic results. 


pull, Professional 7.0 


hint diaiers crowds 


ex superlative product” Tim Wilson, plugincentral.com 


You begin with using buZZ’s patented Simplifier, which you can use repeatedly, in different ways, on 
multiple layers. You can then combine the Simplifier with the other twelve buZZ effects, or apply the 
ones you use now. 


All this for under £95.75 (inc. VAT). Call 01223 701701 for your —_ =segmentis 
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Illustration: Roy Gerritsen [e] roy@boompje.com [w] www.boompje.com 


50 Dreamweaver 
UltraDev 4 tips 


From the Tao of shortcuts to the Zen of 
database design, here are 50 nuggets of 
wisdom destined to smooth your way along 
the path of U/traDev enlightenment... 


here's no denying that 
Dreamweaver UltraDev 4is a 
complex piece of kit: behind 

: the menus and panels, lurks 
a plethora of shortcuts and quick fixes. 
Most people usually only discover 
these after devoting a hefty chunk of 
time to the package, which is why we've 
compiled this collection of short and 
simple tips. 

Elsewhere in the mag you'll find 
advanced tutorials on creating specific 
projects, but here’s where you'll pick up 
the techniques you'll be using every 


day. UltraDev brings together a 
number of different development 
processes and puts them in one place. 
Page design, application design, 
database integration, client and server 
side scripting and publishing are its 
main features. 

Each of these is a discipline in its 
own right, so our tips cover database 
design, Dreamweaver layout tips and 
server scripting as well as a range of 
UltraDev workflow tricks. Turn the page 
and supercharge your knowledge of 
Web application development... 


Hold down the Ctrl or Command key to draw multiple layout cells. 
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1. Line break 

To insert a line break when editing text, 
hit Shift and Enter. Using Enter on its 
own starts a new paragraph. You can 
force Dreamweaver to place more than 
one space between characters using 
Ctrl, Shift and Space. 


2. \mage links 

When you amend a template you can 
automatically update pages that use 
that template, but if you move a page 
from one folder to another, you may find 
that the image links and hyperlinks 
within it break. If this happens, go to 
Modify>Templates>Update Current 
Page to fix it. 


3. Multiple cells 

In Layout view you can only draw one 
Layout Cell at a time by default. To draw 
multiple cells in one session, hold 
down Ctrl in Windows or Command on 
the Mac. 


4. Repeating Regions 

UltraDevs Repeating Regions server 
command enables you to create a table 
that is automatically repeated on the 
page as many times as is needed. Use 
Layout Tables to make the region you 
wish to repeat as complex as you like. 


5, Autostretch feature 

When using the Make Column 
Autostretch feature in Layout view, 
Dreamweaver asks whether you want it 
to create invisible spacer images. 
Create your own one pixel GIF in an 
editing package and use that to shave 
off a few download moments. 


6. Rebuilding the site cache 

If you've made changes to your site 
outside of Dreamweaver, those 
changes won't be reflected when you 
choose Refresh Site List in the Assets 
panel. To do this, you have to rebuild 
the Site Cache by Ctrl-clicking 
(Windows) or Command-clicking (Mac) 
on the Refresh Site List button. 


Z Docking panels 

Dreamweavers tabbed panels dock to 
each other. Click and drag on the 
tabbed section ona panel within a 
window to tear it from its default 
position, then drag it to any other open 
window to dock it. 


8. History steps 

Go to Edit>Preferences and in the 
General tab you can enter any number 
you wish in the Maximum Number of 
History Steps section. To save on 
memory, we suggest that you lower the 
number of History steps available. 


9. JavaScript reference 
Go to Window>Reference to launch the 
much underused Reference panel. 


Use Code view to teach yourself server 
scripting or cut and paste ready-made scripts 
from the Net directly into your code. 
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The Preferences panel in Edit>Preferences is 
home to many of Dreamweaver’s easiest to 
use Customisation options. 


Both Dreamweaverand UltraDev 4 
contain a full JavaScript reference here 
that can be used to script directly. 


10. Code view 

Looking for a quick way to learn 

basic application server scripting 
techniques? Use Dreamweavers Code 
view to see what UltraDev does when 
you insert recordsets, server 
behaviours and so on. 


Common errors 


11. Sorting errors 

Most errors that you encounter 

in UltraDev will be the result of 
typographical inaccuracies. Be careful 
when entering paths, strings and URLs 
in all dialog boxes. When you hit an 
error, the first thing to do is to retrace 
your steps and make sure that you have 
entered these correctly. 


12. Syntax problems 

When using MS Access as your 
database and ASP you may encounter 
syntax errors. This is often a problem 
with the use of reserved words or 
characters and can usually be traced 
back to the database. Open the ".mdb 
file in Access and make sure that none 
of your tables uses reserved words. 


13. Personal Web Server 
Personal Web Server may not run on 
Windows ME, and is not supported by 


See what's really going on under the bonnet 
when you preview a dynamic page using the 
Debug in Browser option. 


INFO: Troubleshooting Guide for 80004005 
and Other Error Messages 


This troubleshooting error message at 
http://support.microsoft.com will quickly 
become familiar to users of ASP. 


Microsoft. The problem lies mainly 
with the Transaction Server component. 
Although some users have reported 
being able to get PWS to install and 

run on Windows ME without it, 

the combination isn't recommended. 
Use a remote server instead. 


14. Windows 2000 

Dreamweaver UltraDev won't install 
properly on a Windows 2000 Server or 
NT Server unless you're logged as the 
Networks Administrator. 


15. Rollover images 
Rollover images won't work properly on 
Repeat Regions. 


UltraDev building tips 


16. Using the Debugger 

When using the Debugger, you 
don't need to close the window and 
restart it to check new code. If you 
go to File>Debug in Browser, or use 
the keyboard shortcut Alt+F12 in 
Windows, Option+F12 on the Mac, 
the cycle will start again with the 
new script. 


17 Live Data Preview 

The Live Data Preview shows 

dynamic content within your pages as 
you work on it. You can quickly switch 
between Live Data mode and the 
Standard view. It’s best used in place of 
Preview in Browser because leaving > 


The Live Data Preview pulls information 
directly from the data source you define as 
you work on your site. 
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If you leave the Preview in Application Server 
option ticked while working on static pages, 
Preview in Browser fails to work correctly. 


the option permanently on can slow 
down UltraDev on low spec systems. 


18. Using different databases 
UltraDev 4 uses your run-time 
configuration at design-time, but you 
can still design with a local database 
and deploy your site to a remote 
location. You can even use two different 
databases: MS Access locally, MySQL 
remotely for example. Just make sure 
that your field names and relative paths 
remain consistent between the two. 


19. Static Web package 

To use Dreamweaver UltraDev 4.as 

a static Web development package, 
you'll have to switch off some of the 
more advanced functions. When you 
create a new site make sure that 
Remote Info and Application Server 
are set to None. Then go to 
Edit>Preferences and locate Preview in 
Browser. Untick the box labelled 
Preview in Application Server. 


20. Headers 

You can put dynamic elements in 

the head of a page, such as the page 
title, meta tags and so on, by inserting 
the definition code before the <head> 
tag. For example, the following ASP 
code takes the title of a page froma 
database record; 


Good database design will prevent your dynamic page from returning pages filled with empty cells 
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; 
| 


Hold down the Ctrl or Command key to draw multiple layout cells. 


<%title=name_of_recordset("Title”) 
%> 

<head> 

<title><%=title%></title> 

</head> 


21. Live Objects 

UltraDev has a set of Live Objects — 
wizards that let you quickly create 
pages that update, view or delete 
existing database entries. Find them in 
the Insert menu. You can't include more 
than one of these behaviours in a page. 


22. Fast connection 

Create a fast, DSN-less connection to 
an Access database ona local 
Windows system. Go to 
Modify>Connection and choose 
New>Custom Connection String. Name 
the connection, then use the following 
syntax in the Connection String field: 


Driver={Microsoft Access Driver 
(*.mdb)}; 
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— the Show Region (If RecordSet is Not Empty) server behaviour also helps with this. 
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DBQ=C:\path\mydatabase.mdb 


The ‘path’ parameter should be the path 
to your database. 


23. Access databases 

To publish the site to a host that 
supports Access databases, the path 
that comes after ‘DBQ=" should be 
changed to the path to the database on 
your host’s Web server. 


24. Dynamic graphics 
UltraDev doesn't directly support 
images stored in a database, but you 
can still include dynamic graphics in 
your pages by creating a link toa 
recordset that contains a path to an 
image file. 


25, Formatted data 

You can retrieve HTML formatted data 
from a data source to your dynamic 
pages, though it’s preferable to insert a 
path in a database field rather than the 
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Linux 


ChilitSoft ASP for Linux is now available! 


Current version: 3.5.2 


More information on ChilifSoft ASP for Linux: 
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actual data. This can be useful if you 
wish to create a dynamic archive of a 
static site. 


26. No data 

Use the Show Region (If Recordset is 
Not Empty) server behaviour to stop 
your UltraDev authored page from 
writing cells that don't contain any data. 


Platform and hosting 
27 \deal set-up 


The easiest set-up to develop with is a 
Windows-based machine running 
Personal Web Server, deploying to 
Internet Information Server of Windows 
NT or 2000, using ASP as your 
application development protocol. 


28. Chili! Soft ASP 

If you prefer to develop in ASP but don't 
have access to Personal Web Server or 
Internet Information Server, you can 
use Chili!Soft ASP on Linux and other 
UNIX-like platforms. The plug-in runs 
with the popular Apache Web Server. 


29. PHP functionality 

UltraDev doesn't yet support PHP out 
of the box, but there is an extension 
that adds some PHP 4 functionality. 
PHAKtis still at the beta stage, but 
many UltraDevfeatures are supported. 
Go to [Ww] www.interakt.ro/phakt/. 


30. PHP extensions 

The Macromedia Exchange also 
features a number of one-shot PHP 
extensions. Extensions include an 
SQL database connection plug-in 
item and an extension for inserting any 
PHP code. 


31.Mac OS X 
The usual advice to Mac-based 
UltraDev users is to connect toa 
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Chili!Soft ASPs available from [w] www.chilisoft.com. You can get the Apache Server for Linux 
and UNIX platforms from [w] www.apache.org for free. 


Macromedia Exchange tor Dreamweaver UuraDey 


Access the UltraDev Exchange from the 
Commands menu in UltraDev or go direct in 
your browser to [w] www.macromedia.com/ 
exchange/ultradev/. 


remote application server ona 
Windows or UNIX platform. With the 
launch of Mac OS X, expect to see 
more application servers ported over to 
Macintosh hardware. Early entrants 
include Tenon’s iTools, an OS X-based 
Web Server that supports JSP 


32. Allaire's ColdFusion 
Macromedia has recently acquired 
Allaire, the company responsible for 
ColdFusion. With true cross platform 
development and deployment 
capability, the next version of UltraDev 
could be an essential purchase. 
ColdFusion Studio 4.5 is already 
available as a bundle with UltraDev 4. 


33. CFML 

Download a free reference guide to 
CFML, ColdFusion’s mark-up language 
from the UltraDev Exchange. You'll find 
it in the App Servers category. 


34,MySQL 

Most free and many pro hosts that 
support database publishing do so with 
MySQL. You can convert MS Access 
databases to the format using 
Access-to-MySQL, available from 

[w] www.convert-in.com for about £20. 


35.'7' 

When specifying URL directory paths, 
don't forget to terminate the path with a 
forward slash ‘/’. Without it, the user’s 
browser needs to connect to the server 


Ubradey 4 + Ultrasuite4000 = UltraRAD 
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46. [w] www.udfag.com — answers 
a range of advanced UltraDev 
queries, arranged in an easy to 
navigate hierarchical structure. 


twice: once to check fora file or 
directory, then again to retrieve the 
default page associated with the path. 


Database design 
36. Using groups 


In cases where you are dealing with 
lots of different categories of 
information, try to split those 
categories into groups and then give 
each its own table rather than trying to 
stuff everything into one large table. 
This will make your database a lot 
easier (and quicker) to navigate. 


37. Categories 

Think about how people will access 
the data when coming up with table 
categories. Your aim is to minimise 
the amount of searching your Web 
application has to do when a query 
is sent. A good guideline is to try to 
confine one table to one ‘topic’ or 
type of data. 


38. Separate fields 

Each field in a table should contain only 
one type of data. For example, you 
shouldn't have a field that contains 
information about age and year of birth. 
These should be in separate fields. 


39. Primary key 

Every table should have a ‘primary key’. 
Aprimary key contains data that is 
unique to that table and isn't an optional 
field. This helps when you’re designing 
an application in UltraDev by enabling 
you to target a specific table. You can 
set up an automatically numbered ‘ID’ 
field as your primary key if you like, but 
make sure the name of the field is 
unique within the database. 


40. Future searches 

If you are going to enable users to add 
records to your database, think 
carefully about how each field should 


47.(w] www4guysfromrolla.com — 
silly name for one of the best ASP 
and Web application development 
sites on the Net. 


48. [w] www.UltraDevextensions. 
com — more than just a behaviours 
site, this also features an in-depth 
Yahoo! -style links section. 


19283-24673 - - [1B EHQVOO.15: 


iTools is the first of a new generation of Mac OS X-based application servers that add easy-to-use 


Web serving. Find out more at [w] www.tenon.com. 


function, and how future searches 
might work. For example, it would be 
better to give users a set of categories 
to choose from under ‘Occupation, 
rather than allow some to type in 
different variations of the same 

job title. 


41. Date and time 

Some fields in your database will have 
global significance: date and time 
fields are ideal examples. Rather than 
repeat fields like these in different 
tables, place them in their own table 
and draw up relationships between the 
other tables in the database. 


42. Joining table elements 
Make sure that the relations you 

build between tables are logical. 
Don't join table elements just because 
it’s possible. 


43. Abstracts 
If possible, create relationships 
between purely statistical or abstract 


49. (w] www.UltraDev.com — 
Macromedia's own site with 


link to the UltraDev Exchange. 


technical support, downloads anda 


fields. For example, assign each 
member in an address book an ID 
number and use that as the key field to 
relate between tables, rather than using 
their name or address. 


44. Paper work 

As with Web design, lay out your 
database design on paper first. Seeing 
the categories in front of you in black 
and white will help you to divide data 
into tables and decide where 
relationships need to be drawn. 


45. Labelling 

When assigning names to fields, be 
specific about the data you're labelling. 
For example use ‘RecordDate’ instead 
of ‘Date’ and ‘ClientName instead of 
‘Name’. This helps you differentiate 
between crucial fields later and avoids 
problems with reserved words. EE 


50. [w] www.udzone.com - this 
unofficial UltraDev news site 
rounds up the best extensions and 
tutorials on the Net. 
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For the latest experience in urban cool, check out Denim, 
Soho's hottest bar and restaurant. From the minute you 
enter its opulent, red padded interior - this is a safe place for 
the clinically stylish - you are in another world. Opened in 
November by brothers Antony and Richard Travis, Denim is 
frequented by the seriously georgeous: Kate Moss, Jude 
Law and Brad Pitt. Inspired by his trips to Japan, Antony 
commissioned Sean Clarkson to create the brash, Oriental 


inspired interior and the beautiful people just cant get 
anough. Even the DJ, Jason Buckham, is a professional 
B: when he's spinning turntables. Are you ready for your 
up? 


Battersea Power Station, London West Motel + Rail Station 


1. The NTouch site was one of Random 
Media's early projects. It was the London 
College of Fashion's student ezine and won 
Shockwave Site of the Day, as well as 
winning an A List Apart in the site's 1999 
awards. The horizontally scrolling site was 
fresh in its day and led to Random getting 
the job to redesign the LCF’s main site, and 
its Battersea Power Station project. 


2. Random Media was commissioned to 
create the Power Station @ Battersea site 
by the property developer that owns the 
site. Currently it’s an impressive Shockwave 
presentation on what the future of 
Battersea may hold. Have a look at [w] 
www.thepowerstation.co.uk to see what 
Random Media has created so far in this 
seven-year project. 


3. Though Random Media uses 
Dreamweaver extensively, UltraDev isn't on 
the menu — the company prefers to 
program databases in PHP. This site for 
Hotel Brokers helped rebrand the client, 
and contains a database-heavy service 
through which companies can check hotel 
room availability and make reservations on 
a large scale, for conferences and the like. 
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Random {Tledia 


“Like a normal company would use Office, we use Dreamweaver,” 
says Victor Benady, Creative Director of Random Medic... 


hen the first thing that pops into your mind 
when looking at a piece of art or design 
work is the name of the software used to 

| create it, then something's not quite right. 
Sadly, this is too often the case when you're online, 
and probably more so with Flash than with any other 
creative application. 

So when the Web design outfit Random Media 
created its original company Website, it was with a 
deliberately anti-Flash, anti-Web design attitude. “At 
the time were a little fed up with Flash and its 
limitations,” explains Victor Benady, creative director 
and founder of the company. “We wanted to show that 
some things could be done in DHTML, and it’s pure 
Dreamweaver code, actually.” 

Opting for what feels like a more graphic 
design-orientated approach, while using flamboyant 
coding to give the site a sense of freedom and space, 
the site presented only basic information about the 
company. There was never the need to confine things 
to a menu structure or an interface, yet the designers 
managed to create something that showcases some of 
Random Media’s competencies without looking like 
all the other Flash trash out there. 

That original site has carried the company for the 
best part of two years, but all good things come to an 
end — Victor's team, which has grown from two to 14 in 
that time, is at work creating a new online face for the 
company. For Random Media, as with so many other 
Web design agencies, Dreamweaver is one of many 
tools at its disposal. Important as it is for creating 


Transglobal 
sneaker dealing is 
at an all-time high. 
From Camden 
market to the 
fashion mecca of 
South Molton 
Street, the sneaker 
is alive and 
kicking. A pair of 
authentic 1970 
Nike Waffles is to 
some people as 
prestigious as the 
latest Gucci 
stilettos. By Sara 
Hannan 
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day-to-day sites quickly and efficiently, you'll also 
find Flash, Director, Photoshop and Illustrator on 
Random's hard drives. 

The new [w] www.randommedia.co.uk, will come in 
two flavours — HTML and Shockwave. The site is still 
in development, but the goal is to build a site that will 
intrigue users ina variety of ways. “We're going to 
throw everything wide open and let people interact a 
great deal and leave their mark on it,” explains Victor. 
“It will be in a multi-user environment. It will have 
forums on it, and WebCams in our office. Every time 
someone visits the site they'll leave some kind of a 
fingerprint there. We want it to be a much more 
organic, growing site and we're going to risk abuse, just 
because we think that’s how a Website should be.” 

For inspiration, Random Media's designers cast 
their gaze in all sorts of directions. As its new company 
site is to have evolutionary and organic themes, team 
members have been dispatched from Random Media’s 
Mayfair base to collect ideas from the Science 
Museum and the Natural History Museum. According 
to Victor Benady they've been looking at fossils, 
insects and fish... 


What about the clients? 


We've focused on Random Media’s own home page, 
but don't get suspicious — the company does have a 
slew of clients, and a number of big projects under its 
belt. One of the most celebrated is its involvement in 
the promotion of the Battersea Power Station > 


At a recent auction held at the Notting Hill Arts Club, London, } to set a limit of £100, it doesn’ matter what the trainer is | 
celebrity sneakers such as Mel C, Zoe Ball, James Lavelle and will get it for £100." Shops like Soho's Kokon to Zai sell cult 


Naomi Campbell were auctioned for the homeless charity Japanese trainers with exclusive price tags to match, 
Centrepoint. David Hillcroft, co-ordinator for the auction defined A spokesperson from the Greek Street style haven justified the 
the future of sneaker dealing as a growth market, “The trainer costs by explaining: “i is hard work and takes a lot of 
Japanese spend a lot of money collecting and even have research to get hold of these shoes. It's a very competitive 
magazines dedicated to the trainer. The market is dictated by market as there is high demand for certain types.” If one store 
the Japanese and Americans although it's only just starting in exclusively stocks a sneaker they will make sure you spend 
‘this country.” your money to own it. 

Jonathan Wong, 27 Gucci Sales Assistant, is one of those Justin Deakins, 27, a Camden market trader is well known 
people who will part with serious sums to own the ultimate among aficionados and describes himself as,"a dealer 


sneaker. “Occasionally | buy trainers from Japan, but 'm kind of —_train-spotter’. 
weird about the pricing because it's getting to be a bit silly now. 
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redevelopment. Parkview International, the Hong 
Kong-based property developer which has bought the 
London landmark, is planning all sorts of commercial 
uses for the building and Random Media has been 
designing a Website for the venture. 

Anyone curious about the future of the Power 
Station can access an online Shockwave presentation 
to get an idea of what the plans are. As these plans 
solidify, clearer information about them will be made 


Bubble Boy 


As we go to press, Random Media is about to put its site forthe Buena Vista/ Touchstone Pictures movie Bubble Boy online. The 
site was started as the film began shooting and has had to be reworked to fit in with the production company's changing ideas 
about the target audience. The movie tells the story of a boy with an immunity system problem, who's confined to a plastic bubble, 
and began as an adult picture but is now rated 12. The site consists of home pages for the principal characters, and extends their 


personalities, adding extra value to the film. There are also two Web games. Visit [w] http:// bventertainment.go.com. 


available. “It's an emotional ride through what it might 
be like, rather than a factual account,” says Victor. 
“What's there at the moment is a fraction of what will 
be there over the next couple of years. The next stage 
is a virtual press office where press releases can be 
put up: movies, plans, people can book appointments 
to do interviews, all that kind of stuff. Everything a 
press office would do.” 

With development expected to take seven years, 
the contract should give the company quite a bit of 
security going forward. Not that its in any difficulties. 
While many big agencies have been hit hard by the 
downturn in general confidence in the Internet, 
Random Media insulates itself by taking a large 
proportion of work from the lifestyle and 
entertainment sector. 

The company continues to work on a number of film 
sites. Design-wise, one of its most interesting projects 
has been a CD-ROM created for a Budweiser 
promotion and given away in the November 2000 
edition of the magazine Sleazenation. It’s a personal 
favourite of Victor’s and has an innovative interface 
that collapses and rescales a variety of photographic 
images and text article in a way that’s easy to browse 
but does not make the content seem trivial. How it 
works is difficult to explain, but it’s very good, 
believe us. EE 
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THE EVIDENCE 


WE FIRMLY BELIEVE IN LETTING THE WORK SPEAK 
FOR ITSELF, HERE ARE A SELECTION OF PROJECTS 
BY RANDOM MEDIA THAT ARE CURRENTLY ON-LINE: 


PKERS SPECIALISE IN HOTEL BOOKINGS 
ORATE CLIENTS. THE WEB SITE INVOLVES 
PRANDING OF ITS CORPORATE IMAGE AS 
SOPHISTICATED BACK-END WHICH 

OTEL BROKERS TO MAINTAIN AN UP TO 
OF AVAILABLE HOTELS AND ALLOWS 

1O BULK BOOK THE HOTELS OF THEIR 
IN-LINE, 


— Se Se ml 


PARKVIEW / BATTERSEA POWER STATION: 

THE LATEST PHASE OF THE POWER STATION @ 
BATTERSEA SITE INCLUDES EIGHT SHOCKWAVE 
MOODSCAPES AND MULTI-USER ENVIRONMENTS 
WHERE USERS CAN ADOPT AND MAINTAIN 
"BATTERBUG’ PETS, PLAY GAMES AND CREATE THEIR 
OWN ART, AMONGST OTHER THINGS, 


BLE 


INTERACTIVE DOCUMENTARY FOR THE WEB SITE 
FOR THE NEW BRUCE WILLIS AND SAMUEL L 
JACKSON MOVIE, 
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1. Using Director, Random Media designed an innovative interface for a 
covermounted CD-ROM covering the dance music scenes in New York, 
Detroit and San Francisco. “That really came about because Sleazenation 
had so little experience in putting things on the screen that they were 
giving us these features with 2,000 words and 15 pictures, as you would 
expect in a magazine. We just needed to accommodate it somehow,” says 
Victor Benady. “Once we came up with it we realised it was something 
quite special. It was a nightmare to program.” 


2. Random Media’s own site was intended to go against the grain of 
mainstream Flash-orientated Web design. Basic information is presented 
in windows that can be dragged round the screen. There's no fussy 
interface and the site relies more on good graphic design than animation 
or effects. The company’s new site, however, promises a Shockwave 
extravaganza of interactivity and multi-user experiences. 
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Integrating Dreamweaver 
with your design workflow 


A good Website is an amalgamation of many different elements pulled 
together from several different programs 


ncorporating text, images, 
media, interactive elements 
and programming into an 
engaging site is what 
Dreamweaveris all about, but what 
about the other applications involved? A 
collection of Web pages doesn't make a 
great site on its own. What you include 
depends on what you're trying to 


achieve, but most sites these days 
usually require more than just some 
good copy and a few snappy image 
buttons. Fortunately, one of 
Dreamweaver’ key features is its ability 
to enable you to access other tools you 
may want to use to modify different 
elements of your Website. Dreamweaver 
installs out of the box with support for 


BBEdit, Fireworks and QuickTime 
Player. Did you realise that you can 
integrate Dreamweaver with a host of 
other applications? 

The two most obvious are Photoshop 
and Flash which most designers use, but 
this can be extended to include anything 
you want from Directorto Word, from 
FrontPage to UltraDev. 


Part 1: Configuring external editors 


We'll start by setting up Dreamweaver to support other 
applications for editing elements of your Website 


External editors 


Although a powerful Web design 
program, Dreamweaverwas 
never intended to stand on its 
own. Macromedia provides 
powerful built-in integration 
between Dreamweaver and 
Fireworks, but it also provides 
ways of extending this to other 
programs. There are several 
file types pre-configured to 
work with specific editors, 

but these can be changed and 
added to in order to extend 
integration support. 


The next thing to do is configure how 


Dreamweaver handles files that you've edited 
externally. Reload Modified Files tells Dreamweaver 
what to do when a file has been changed and saved 
externally while Save on Launch controls what 
Dreamweaver does with an open file before it 
launches an external editor. 


BBEdit is the default external editor handling 

raw coding tasks, but it is a simple task to 
change it. Go to Edit>Preferences and select File 
Types/Editors and deselect Enable BBEdit 
Integration. Then click the Browse button to select 
another external editor. We've selected SimpleText. 


The File Types Editors dialog also enables you 

to add support for new file Extensions to 
Dreamweaver. To add a new file type, click on the 
+ button above the Extensions list in the middle of 
the screen and type in the Extension. 


To assign an editor, select the File Type from 
the Extension list, click the + button above the 
Editor's list and then select the application in the 


given file type, just repeat the process. 


If you configured multiple editors for a single 

file type, you can tell Dreamweaver which one 
is the primary editor that should run when you 
double-click the file. To do this, select the File Type, 
then select the Editor and click Make Primary. 


When the primary editor has been changed, 

double-click or control-click (right-click in 
Windows) to launch the new editor. The others are 
accessible via the Edit With. 


dialog. If you want to use more than one editor for a 


Once configured, these settings change how 

Dreamweaver handles code editing tasks. In 
this instance, Edit with SimpleText appears in the 
Edit menu in place of Edit with BBEdit. This is 
particularly useful if you don't have, or don't like, 
BBEdit, or if you prefer to hand edit code without 
Dreamweaver's interference. 


Source File... 

Low Source... 

Align » 
Open Attached Template 
Editable Regions > 
Edit Tag <img>. 
Remove Tag <img> 

Make Link 

Remove Link 

Open Linked Page 


Adobe Photoshop ¢ 


G To use the secondary editor(s), hold the 
Control key and click the file (right-click in 
Windows) and go to Edit With to select the editor. 


9 | To remove an editor from a given file type, 
simply select the File Type from the Extensions 
list, select the application from the Editor list and 
click the - button > 
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Part 2: Configuring workflow management 


Use Dreamweaver's workflow features to manage the 
production process for your Website 


Why use 
workflow? 


Dreamweaver has a powerful 
built-in feature which enables 
you to manage the production 
process of your Website and 
manage contributors. Support is 
provided for a variety of industry 
standard workflow systems as 
well as local hard drive access if 
you don't have access to the Web 
server. Used in combination with 
external editors, this feature can 
be used to manage your native 
source files as well as the Web 
output with several people. 
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Dreamweaver's workflow features are 

accessed via the site configuration. Go to 
Site>Define Sites... and select the site you want to 
manage and click the Edit button. 


To configure Dreamweaver to work with 
4 SourceSafe, click the Settings... button and 
enter the path to the database server, the VSS 
project name, your username and password (you 
can get these details from your database 
administrator or server manager). 


‘Chok m/Out: Lz Kae Fie Check tat Chek Out 
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If you don't want to work directly to your 
production server, you can still use 
Dreamweaver's workflow and work from a local or 
shared network drive. Select Local/Network from 
the pulldown menu, and select the site folder. 
Ensure the Refresh and Check In/Out options are all 
selected and each designer uses a different name. 


Select Remote Info from the Category list. This 

presents a pulldown menu headed Server 
Access. Click on the pulldown menu and select the 
connection method you want to use. 


G You can also use WebDAV to manage the code 
base. Select WebDAV from the Server Access 
pulldown menu and click the Settings... button. 
Assuming your server supports it, all you need is the 
site address, username, password and email address. 
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8 | Once configured, a file must first be Checked 
Out for you to edit it. To do this, simply 
double-click on the file in the Site window. 
Dreamweaver will ask whether or not you want 
dependent files (eg, graphics or media) as well. If 
you only want to edit the file you selected, click No. 


In this example, we've opted for SourceSafe. In 

order to make use of Dreamweaver's workflow 
system, you need to ensure that the Check Out Files 
when Opening option is checked. 


eek OM Pee wn ping 


Dreamweaver can also manage your site's 
G workflow via your FTP connection. Select FTP 
from the Server Access pulldown menu and enter 
your FTP settings. Be sure to select both of the 
Check In/Out options or DW may allow multiple 
users to open the same file at the same time. 
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When another user accesses the remote site, 

they will be able to see which files are in use by 
other users. If they attempt to check out a file in use 
by someone else, they will get a warning dialog 
asking whether Dreamweaver should override the 
other user. 


Part 3: Integrating with Flash 


By bringing your Flash source files into the site, you can 
manage them in Dreamweaver with the rest of your site 


Managing Flash 
files 


It's not uncommon for Flash files 
to need changing repeatedly 
during the course of designing a 
site. Unfortunately, several 
different people may work on 
them, there may be multiple 
versions on different computers 
or they may even become 
mislaid. Bringing your Flash 
source files into the site makes it 
possible to manage them in 
Dreamweaverwith the rest of 
your site. 


a The first thing is to ensure that you have the 
Flash extension configured within DW and an 
appropriate editor (see Part 1). 


From: (We burrito masiar (ihe burrtemesior) =) 
@ To: @ jdoeeburrito.com 

8 ce: 

@ Bee: 


Subject: [iesh/Celculetor fla in Site "Dreomveaver Integration" 


4 | Any user accessing the remote site will be able 
to see the new files and who has them 
checked out. Double-clicking on the user's name in 
the Site Manager will cause Dreamweaver to open a 
new email addressed to that person. 


07/11/99 
Today 
Tetay 
Today 


Totay 
07/11/99 
25/07/99 


7 With the source Flash file and the associated 

Flash Player stored on the remote site, you can 
check out any Web page and embed the Flash file in 
the page. 


2] Next, copy the Flash files to your local folder 
then launch the Site Manager: all the files 
you've copied should be visible. The files need to be 
copied to the remote site so that Dreamweaver can 
start tracking access to them. Select the files in the 
Local Folder pane, control-click (right-click in 
Windows or use the toolbar) and select Put to 
upload the files. 


When you want to edit any of the imported 

Flash files, select it from the Local Folder pane, 
control-click (right-click in Windows or use the 
toolbar) and select Open with Flash 5. 


Once embedded, save the Web page and 

close the file. If you, or anyone else, needs to 
update the animation, simply return to step 5, edit 
the source file and re-export the finished movie. 


g Once the files are uploaded, they are available 
to everyone accessing the remote site, 
although they are automatically marked as being 
checked out in your name. 


Nino Checks Ont 
Ontos 
Locate in Remote Site 
Set Page 


G Once you've completed your changes in Flash, 
save the Flash Player file to a directory in your 
local folder of the site, close the file and return to 
Dreamweaver. The file list is updated to include the 
final Flash file which you need to select and Put on 
the remote site. 


| 


TEU 


3 | In the Site Manager, check the file back in. 
By keeping your Flash source files in a separate 
area from the final assets used in the site, it's easy to 
exclude them from your final upload to the 
production site. > 
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Part 4: Working with Fireworks 


Once imported into Fireworks, all the program's tools are available 
for manipulating the image 


A special 
relationship 


Macromedia has put a lot of 
effort into developing a special 
symbiotic relationship between 
Dreamweaver and Fireworks. 
With version 4, it's now possible 
for Dreamweaverto issue 
commands to Fireworks from 
within a page, which means that 
you don't have the hassle of 
loading Fireworks, modifying 
the image and then returning 

to Dreamweaver. 


Depending upon your settings in Fireworks, a 

dialog may appear asking if you want to open 
an existing Fireworks document. If you want to 
convert the image to a PNG file, click Yes, otherwise 
click No. 


a To optimise a graphic within your size using 
Fireworks, simply open the page you want, 
control-click (right-click in Windows) on the image 
and select Optimise in Fireworks... 


, 

In this instance, we've previewed four 
different versions of the image before 

selecting the one we want. Clicking on the Update 

button will finalise our changes and return the 

optimised graphic back to Dreamweaver. 


5 | If you need to retouch the image, you can 
control-click (right-click in Windows) on the 
image and select Edit with Fireworks 4. This 
launches Fireworks and opens the image in it. 
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8 | While you're editing any images in Fireworks, 
Dreamweaver automatically checks out these 
files from the site to avoid someone else working on 
them at the same time. When you're finished, you'll 
have to check them in yourself. 


Fireworks returns the updated image to DW 
and it is embedded in the Web page. As with 

the Flash integration in Part 4, you can repeatedly 

optimise or edit these images with Fireworks. 
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The Optimise command invokes Fireworks’ 

Export Module within Dreamweaver and 
opens the image file in it. You can use the Export 
Module to finetune the file format, compression 
settings and/or colour depth of the image. 


G Once imported fully into Fireworks, all of the 
program's tools are available for manipulating 
the image. In this instance, we've added a couple of 
hotspots and doctored the palm tree to make it 
shorter. Clicking Done will finalise the changes. 


[9 | One thing to bear in mind is that as you move 
back and forth between Dreamweaver and 
Fireworks (or any other program), your remote site 
and local site are likely to become out of sync. To 
rectify this, periodically go to Site>Synchronise to 
synchronise a file, folder or the whole site. 


FOR ALL WEB DESIGNERS 


You need to stay abreast of the most 
innovative and imaginative sites all round the 
world. That's why, every month, Cre@teOnline 
showcases the finest sites and the people 
behind them. As well as acting as a forum for 
professionals to exchange ideas, we also 
explore how sites can be improved and the 
effect they have on their end users. If you 
want to stay ahead of the game, start here. 


THIS MONTH: THE FLASH ISSUE 


Over 95 per cent of the world’s Internet 
population is kitted out with Flash, and Web 
designers are using it more innovatively than ever 
before. That's why Cre@teOnline is devoting a 
special issue, direct from San Francisco, on the 
product that's changing the face of the Net. In our 
July issue we uncover what you need to know 
about the future of Web design and Flash’s role in 
it. We've got the inside scoop from Macromedia, 
revealing how the company sees it developing, 

and we expose the hopes of professional designers 
from the US and Europe. 


PLUS: 
Over 50 tips from the world's best Flash artists 
Flash founder Jon Gay explains how it got so big 


The ten best Flash artists from around the globe 
reveal the secrets of their success 


20 inspirational Flash sites (and not a Skip Intro 
among them) 


What today’s professional designers want from the 
next Flash incarnation 


How Flash fits into the Web agency of the future 


ON SALE: THURSDAY 14 JUNE 


Illustrations: Kerry Roper [t] 07976 774820 [e] roper_k@hotmail.com [w] www.youarebeautiful.co.uk 
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Dreamweaver 


Want to know how to make your Website automatically fit the browser window? Or how to 
copy your nav bars across pages? Read on for answers to these knotty problems and more... 


1. Question 
Are there any good sources for JavaScripts on the Net? 


Answer 

Here are a few that | visit, in no particular order... 

[w] webdeveloper.earthweb.com/pagedev/webjs 
(also known as wwwjjavascripts.com) 

[w] javascript.internet.com/ [w] www.javascript.com/ 
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Welcome to Javascripts.com’ 

Javascripts.com is the largest Javascripts repository oniine. 
ontaming thousands of Javascnpts. Each scnpt available 10 
Download - for free! 


Select the category of Javascripts fiom the lat navigation bar 
oF fom the lists below. This gies you access to scripts 
submitied by hundreds of communiy mambers, I you would 
like to submit « JavaScript, click bee. We will ever include 


1. JavaScripts.com — an excellent resource for quick scripts 
and scraps of DHTML wisdom. 
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2. Question 
How dol get a ‘go to URL action in Dreamweaverto be a 
mousedown and not a mouseover? 


Answer 

You need to change the target browser in the 
Behaviours panel. To do this click on the ‘+’ and then 
choose the Show Events For option. This limits this 
panel so that it only shows the possible JavaScript 
events for the browser you're targeting — you'll need to 
select IE 5. Once you've done this you'll be able to 
select the ‘onMouseOver' option. 


3. Question 

If| want to place a pulldown menu in the middle of my 
Page, the actual menu refuses to go directly underneath 
the link as edited in Fireworks, but somewhere else! 


Answer 

The actual location of a pop-up menu from Fireworks 
is absolute and set in a CSS style. If within 
Dreamweaver you move the graphic that triggers the | 
pop-up menu, the pop-up will still appear at its | 
original CSS position, even though the graphic is 
displayed in the new position. Absolute positioning is 
used to make sure the pop-up menus and submenus 


always appear in the correct position. Fora full | 


explanation of how to change the position of a pop-up 
see Technote 15001 in the support section on 
macromedia.com. 


4. Question 

I'm building a Web page using frames. My problem is 
that I can't seem to be able to put a stationary 
navigation bar on the left side and still keep the main 
body scrolling and linking to the proper pages. | have 
constructed this page several times but the same thing 
keeps happening. The page looks fine while I'm building 
it, but when viewed in the browser, the nav bar doesn’t 
appear on the page. The main body does appear though, 
and scrolls as per usual. Any suggestions? 


Answer 

Frames do take some getting used to. The main things 
to remember are that any page that opens into a 
frameset has to be told which frame to open into: 
failure to do this normally results in the page opening 
in the leftmost frame as in this example. When you 
create a link, tell the link where to open the page in the 
Property inspector by using the Target command. The 
Property inspector in conjunction with the Frames 
panel (opened from the Window dropdown menu) can 
be used to set whether a frame is resizable or fixed, 
has borders or has the ability to scroll or not. 


2. You can access an almost amusing variety of onX event 
handlers from your Dreamweaver Behaviours palette. 


5. Question 

What's the easiest way to copy a nav bar to other pages? 
There's probably a very simple method, but I'm missing 
it somewhere! 


Answer 

There are two great ways in Dreamweaver to quickly 
use navigational elements on multiple pages, giving 
you greater flexibility: templates and library items. 

A template can be used to apply a new design to a 
whole page (it will even reposition objects on the page 
for you), while a library item can be used to add 
single/or groups of items to a page. Library items can 
even be used within templates. These features give you 
the advantage of only having to update one instance of 
your navigation bar to update all your pages. 

Creating a library item couldn't be easier: select the 
information you want to use on the page and drag it to 
the Library panel. It's automatically added to the 
library and ready to use. If you drag layers to the 
library when you drag these out to a new page, they will 
appear in the same position as the original layer. 


6. Question 

| would like my site to automatically fit everyone's 
monitor/browser window correctly so that viewers 
don't have to scroll left or right to view the whole thing. 
Also, if the user decides to make the window smaller, 
how can | make the site shrink along with it? | have seen 
this done in Flash 5.0. | know that | need to make the 
browser size 100 per cent, but have no idea how. 


Answer 

There are two places you can do this, one is in Flash as 
you export the movie, the other is in Dreamweaver 
when you have imported the movie. In the Publish 
settings dialog box (File menu) in Flash, go to the 
HTML Options and set Dimensions to Percentage and 
the Width and Height to 100 percent respectively. 
Leave the Scale option set to Default — Show ALL. 
Everything will now scale in proportion. If you dont 
care about the movie scaling in proportion and just 
want it to fill the available window space then change 
the Scale option to Exact Fit. These options are also 


5. Dreamweaver templates, in your Asset Manager (v4 only), 
are acomplete godsend, especially if your server doesn't 
support server-side includes, or SSI. 


available in Dreamweaver. After you've imported a 
Flash movie, select it and the Property inspector will 
change to show all the available Flash controls. It even 
includes the ability to play the movie directly within 
the Dreamweaver design environment. 


7. Question 
How do! make coloured scrollbars? 


Answer 

Starting with IE 5.5 you can colour various scrollbar 

elements using JavaScript. The controls available are 

for Scrollbar colour, shadow and highlight: 
object.style.scrollbarBaseColor = xyz; 
object.style.scrollbarDarkShadowColor = xyz; 
object.style.scrollbar3dLightColor = xyz; 

in this example xyz is the name of a colour ora 

RGB value. 


8. Question 
How dol make my page design work well on various 
window sizes and resolutions? 


Answer 

Welcome to the wonderful world of Web design! 
There's only one way to get a consistently good result 
across different browsers, platforms, screen sizes and 
resolutions and that’s Macromedia Flash. Flash will 
scale intelligently to take maximum advantage of the 
available screen size. 

Traditional Web pages, ie, HTML-based sites, can 
be viewed on what are considered to be elastic 
screens — the look of the page depends on the 
resolution and size of the screen being used to view 
the site. To make matters worse, the available height 
differs more than the available width due to toolbar 
and Start menu customisation, while the width only 
varies on the resolution. To guarantee your site's 
usability, remember to keep the navigation in the top 
300 pixels of a page then even in the worst case 
640x480 resolution, people will be able to view and 


www.bigtimetive.com 
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10. You can create pop-up windows using JavaScript, which 
force the user to give input before moving on. The simplest is 
the window.alert(‘message’) command. 


use your site. This is known in newspaper terms as 
keeping the information above the fold. 


9. Question 

Is there a way to prevent a pop-up window from being 
sent to the back when a user clicks on the main 
window? | want to force them to take some action in the 
pop-up window, even if it is just closing it. 


Answer 

There are two ways you can do this. The first is by using 
a modal dialog box called from JavaScript using either 
the window.alert(), window.confirm(), or 
window.prompt() commands. This produces a dialog 
box that retains focus until the user dismisses it. The 
other involves some browser specific coding but will 
give any window the ability to keep focus. For NN use 
the onBlur event handler, 

<BODY onBlur="window.focus()"> and for IE use either 
showModalDialog() (compatible with IE 4 and above) or 
showModelessDialog() (compatible with IE 5 and 
above). A word of caution: do not abuse these 
techniques. Surfers don't like a site taking control of 
what they're viewing. 


10. Question 

I've been attempting to add a pop-up menu to my 
Dreamweaver page using images created in Fireworks 
4. The menu works perfectly when viewed through a 
browser from within Fireworks. Unfortunately, when | 
export the menu and add it to the Dreamweaversite, the 
only thing that shows up is the main button and a white 
box. The rollovers don’t work, and the menu doesn't 
appear. Do you know what I’m doing wrong here? 


Answer 

This will quite often happen if the HTML page that 
Fireworks creates has been moved. Dreamweaverwill 
no longer be able to recognize the fwLoadMenus as its 
own native behaviour. This means the links in this 
function will not be reconciled when the HTML is 
placed ina Dreamweaver HTML file that is not in the 
same directory as the originally exported Fireworks 
HTML. You are able to move the Fireworks HTML 
document and images within the site as long as you 
keep them in the same directory structure. For a more 
in-depth answer, see Technote 14995 on the 
Macromedia Support Site, Customizing and 
Troubleshooting Pop-up Menu Images. 


Tl. Question 
| know how to create a form in Dreamweaver, but how 
do| capture the data and forward it via email? 


Answer 

This is a really common question: simply define the 
form's Action as a mailto:link and your job’s done. 
However while this is the easiest method for emailing 
form data, it isn't recommended. Not all browsers 
recognize an email address as a form's Action, plus if it 
fails, it can fail invisibly, so neither the user nor the 
intended recipient will know that the form data was not 
sent! You could use a Common Gateway Interface 
(CGI) script. The CGI script works with the form to 
gather the data, parse it, and insert it into an email. 
Your server administrator may have a CGI script on the 
server that will process your data. If not, there are 
many CGI scripts available for free on the Internet. > 
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For larger volumes of traffic and more secure 
collection of information, use a Scripting language 
such as Active Server Pages (ASP), JavaServer Pages 
(JSP), ColdFusion, and PHP: these are all scripting 
technologies used to pass data to and froma database. 
Dreamweaver allows you to code in these languages. 
However, coding ASP. JSP, and ColdFusion is 
simplified by using Dreamweaver UltraDev. 


12. Question 

When | preview a page in my browser and place the 
cursor over a image, it should automatically play a 
sound (wav file), but instead it just brings up the sound 
player with the wav file in it. The behaviour is set up as a 
normal onMouseOver play sound but it doesn't just lay 
the sound file automatically. Does anyone know what 
I'm doing wrong? 


Answer 
Not all browsers let JavaScript control audio. 
You might consider interactive audio to be anice 
addition for visitors whose browsers support it, but 
be sure to provide visual feedback too. If you need 
interactive audio across a range of browsers, then 
putting the interactivity and audio in Flash is the 
standard solution. 

Here's a quick run down of the different browsers: 
Netscape browsers: because of the way EMBED 
tags work — you specify the MIME type, and the 
browser chooses an appropriate player — you cannot 
predict what type of player will render your audio file. 
This means that JavaScript may or may not be able 
to control an audio file in any particular Netscape 
browser. Generally, a stock Netscape 3+ browser ona 
Java-enabled PowerMac or Win32 will let JavaScript 
control audio through the default LiveAudio Player. 
Microsoft browsers: the OBJECT tag for ActiveX 
Controls lets you specify a particular media player. If 
you're just using an EMBED tag then this does not 
specify a particular media player, and in this case it’s 
possible that a particular browser may be set up to use 
an unusual media player which does not have script 
control over audio. 

The Microsoft browsers for Macintosh do not offer 
any means for scripts and plug-ins to communicate. 

Generally, IE/Win32 browsers let JavaScript 
control audio. IE/Mac browsers do not let JavaScript 
control audio. CNET has a great article Noisy 
Mouseovers that shows you how to provide a common 
sound player for mouseovers — point your browser at 
[w] www.builder.com/Programming/Scripter/ 
061900/ for more information. 


13. Question 

| use Page Properties to set the colours for linked text, 
but this means that all the links on a page are the same 
colour. Is there a way to have different colours for text 
links on the same page? I've tried manually changing 
the text colour in the HTML but the browser still shows 
the Page Property settings, even though the HTML has 
the code for the colour | want. 


Answer 

Please don't do this! The usability of a Website 
depends on many things, one of which is consistency. 
Having different coloured links on the same page that 
in essence do the same thing is going to provide a poor 
user experience. There's nothing more irritating than 
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13. Don't forget to set colours for text, links, active links and 
visited links in Page Properties. If you don't, you might get a 
shock when your designs appear on someone else's computer. 


clicking ona link expecting one thing, when something 
completely different happens. While we're talking 
about links, if you do deviate from the defaults to fit 
with your site's colour scheme, do remember to set all 
four BODY colours, background, text, links, and visited 
links. This is particularly important if you want to keep 
your site usable by people with sight disabilities. 

Visit [w] www.macromedia.com/macromedia/ 
accessibility/ for all the latest information on keeping 
your sites accessible. 


14. Question 

Does anyone know how to make dynamic dropdowns 
using JavaBeans? What is the easiest way to do it 

in UltraDev? 


Answer 

JavaBeans can be used as data sources appearing in 
the Data Bindings panel just like other data sources 
within UltraDev. You can even double-click the bean 

in the panel to see its properties and methods, which is 
known as introspection. Using the Data Bindings 
inspector, UltraDev can see inside a JavaBear’s API. 
You can also drag the bean’s properties and methods to 
the page to create dynamic data references. 

To make a bean available to the Data Bindings 
inspector, simply follow these steps: firstly, verify that 
the server model within your Site definition is set to 
JSP 1.0. Next, open the Data Bindings inspector by 
choosing Window>Data Bindings. If your site is using a 
server model other than JSP, Java data structures will 
not be available. 

Click the plus (+) button and choose JavaBean from 
the pop-up menu. Then enter the bean's name, the 
bean's scope and choose the bean's class, which is 
typically expressed in the following format: 
packagename.classname. Finally for each property 
repeat the following: click on a property to select it, 
then enter a value in the initial value box, then repeat. 
Once you've set up all the properties, click OK and 
you're ready to use your bean. 


15. Question 

| have created a JS rollover nav bar in Fireworks and 
inserted it into DW4. It works great but now | want to do 
something different, but my JS knowledge is fairly 
limited so | could use some assistance. Since the 
rollovers are four state (Over, Out, Active, Over-active) 
and are used for navigation, they show the user what 
section of the site they are viewing. | have links from 


one section to another and would like the rollover 
effects to change to reflect the new section. Since the 
user isn't clicking on the actual rollover button, though, 
the change isn’t made. Any ideas? 


Answer 

From your question it sounds like you'd like one of the 
navigation one buttons to appear in a Down state, 
depending on which page the viewer is looking at. 

If so, first you need to create a Down state graphic 
for each of the buttons. Then adjust the HTML in each 
of your pages to load the Down graphic file for the 
relevant navigation button: first change the source file 
for the image in your Properties inspector, then 
double-click the onMouseout command in your 
Behaviours palette and make sure you've got the right 
image file for that. 

If you also want a different graphic to appear for the 
rollover, you can also change the onMouseout and 
onClick commands in the same ways. 


16. Question 

| use Dreamweaver 4.01 0n a Mac and have been trying 
to get the Check Plug-in behaviour to work. Whenever | 
select QuickTime as the plug-in to check for, 
Dreamweaver adds code for Flash and Director. Then 
when | use the down arrow, all | get is <mousever> no 
mouse out! 


Answer 

There shouldn't be a problem — you could try 
reinstalling Dreamweaver to see if this fixes the error. 
But it's probably much easier to check your source 
HTML against this, which is how it should be: 


<html> 
<head> 
<title>Browser checkf</title> 
<meta http-equiv="Content-Type" 
content="text/html;"> 
<script language="JavaScript"> 
<!— 
function MM_checkPlugin(plgin, theURL, altURL, 
autoGo) { //v4.0 
var ok=false; 
document.MM_returnValue = false; 
with (navigator) if (appName.indexOf 
(‘Microsoft’) ==-1 Il (plugins && plugins.length)) { 
ok=(plugins && plugins[plgin]); 
} else if (appVersion.indexOf('3.1')==-1) { 
//not Netscape or Win3.1 
if (plgin.indexOf(“Flash")!=-1 && 
window.MM_flash!=null) ok=window.MM_flash; 
else if (plgin.indexOf("Director")!=-1 && 
window.MM_dir!=null)ok=window.MM_dir; 
else ok=autoGo; } 
if (1ok) theURL=altURL; if (theURL) 
window.location=theURL; 
} 
//—> 
</script> 
</head> 
<body bgcolor="s#ffffff" 
onLoad="MM_checkPlugin(‘QuickTime Plug-in’, 
‘quicktime.htm’,'noquicktime.htm' false); return 
document.MM_returnValue"> 
</body> 
</html> 
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18. Cell Padding, Cell Spacing and table borders can wreak havoc with your sliced-up graphics. Check they're all set to 0. 


In the <body onLoad="..."> lines, change the filenames 
quicktime.htm and noquicktime.htm to the documents 
you want to redirect your users to. 


Whenever | create a pop-up menu in Fireworks, it works 
fine except that the page has frames, and the pop-up 
menu is hidden behind the other frame. Any ways to 
stop this happening? 


In aword, no. Fireworks menus are created using 
layers, which, like tables, are features of the HTML 
document. Frames, however, are features of the 
browser window, like your file menu and scrollbar. 
There's just no way to make your layers appear 

over frames. 

In much the same way, you'll also find that forms 
and plug-ins also appear over layers, no matter what 
you do. Here, the solution is to either move your form 
or plug-in, or put it in a different layer and use a 
show-hide behaviour to hide that layer when the menu 
appears. But of course, you can't hide a frame. You 
need to either move the menus, or find a design 
solution that doesn't use frames. 


I have designed a site in FWand cut the page up into 
many slices because of the large amount of JPEG 
images. On Internet Explorer, | can't see any lines 
around the slices, but apparently in Netscape they've 
got white lines around them. 


First things first: as a Web designer, you really should 
have Netscape installed on your own computer — both 
versions 4.x and 6. Without seeing the page, it’s hard to 
know exactly what is wrong, but it sounds like Cell 
Spacing may be the problem: just open your page in 
Dreamweaver, select the whole table, and set the Cell 
Spacing to 0 in your Properties inspector. Check that 
Cell Padding and Border are also set 0. 


| have some basic rollovers in one frame of a frameset 
and a small Flash animation in the other frame, but 
when | insert Flash content, the rollovers slow right 
down. It all works fine when | take the Flash out of the 
other frame and the animation is small, sol can't think 
what's going wrong. 


The answer may simply be that your Flash animation is 
using up much of your system's power, so the browser 
slows down. Because Flash is a vector-based medium, 
all the calculations for how each frame should look, | 
shapes, sizes, transparency and so on, happen on the | 
fly. Complex transparencies and large animations in 
particular can slow things down. 

—— — 
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One solution is to select your Flash movie in the page, 
and then set the quality to Auto High or Auto Low in 
your Properties, which adjusts the quality of playback 
according to how well your viewer's system is coping 
with the movie. 


Is there a way in Dreamweaver or Fireworks to have a 
short sentence that scrolls text across table? 


To have dynamic text Like this, you either need to 
use a GIF animation, or combine DHTML with 
layers. GIF animation is almost certainly the easiest 
and least troublesome solution. But DHTML is 
probably faster to download and easier for you to 
update. Head to the Dreamweaver Exchange (see 
the Extensions guide on page 86 for info) where 
you'll find some useful Extensions for working with 
this kind of DHTML. 


| have a problem with Cascading Style Sheets. 

| have made up two stylesheets: one of them is for the 
navigation bar and the other is for the text on the centre 
of the page. | need to add another style sheet for a link 
that opens up another page but when | specify the rules 
for that style and preview it in the browser, the text in 
the middle of the link takes on that style for some 
reason. Is there a way round this? 


The answer here is simple: just create a Custom Style 
in your Cascading Style Sheet palette, called 

‘ windowlink’ for instance. Then double-click to 
select the contents of the link, right-click, and choose 
your new style from the CSS Styles menu in your 
Context menu. EEE 


Expertise provided by Jonathon Harris, technical sales manager at 
Macromedia and Nick Nettleton [e] nick.nettleton@futurenet.co.uk 
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21. Right-click an area of text and you can quickly apply a CSS style to just that paragraph or the selection... 
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searchable image 
| database i in UltraDev 4 


UltraDev 4 makes the creation of fully database driven 
photo albums easier than ever before 


t's true that with a couple of clicks developers continue to push back the boundaries of 

of Photoshop you can transform a what's possible, and static content goes out of fashion faster 
ream of family photos into an than bell bottoms. As the skills needed to make all this 
Internet-ready extravaganza. jiggery-pokery become second nature, you will be able to 


However, what happens when you have too many modify the search criteria to your liking, and those evil, 
photos and your audience needs to be able to frightening databases will morph into your dynamic 
search for the right ones instantly, or browse through content friends. Who knows, in a few weeks you could 
pictures by specific criteria? be competing with the likes of Tony Stone and the 


UltraDev and UltraDev 4 have made the creation other established Internet image libraries... > 
of fully database driven photo albums easier than ever 
before. We show you how to create a searchable image 
library, which can search by section and by image name. 
The Internet is rapidly moving towards dynamic content as 
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Part 1: Foundations 
Setting up a directory for the Website linked up to the Personal Web Server 


Text links 


Databases don't actually hold 
images. Some can, but they 
are very big, expensive and 
scary. The database actually 
holds a text link that directs an 
image tag to the location of the 
image, which is cheating — but 
only a little bit. 


basso l E 
Under the Local Info tab, name your site 
anything, but the local root folder must be 


Check that you have Personal Web Server 
installed on your machine (Mac users see the 


Help file in the U/traDev documentation) by - J <== stored in Personal Web Server. So the directory is: 
entering Internet Explorer and looking for a 2) Open UltraDev and define a new site. C:/Inetpub/wwwroot/nameofyourwebsite. 
directory called ‘Inetpub' on your hard drive. If you Sites>New Site or Sites>Define Site>New. You —_— Create the ‘nameofyourwebsite’ folder at that 
don't have it, don't worry — the software is in a will be presented with the standard site creation location. Click on the desktop icon in your 

folder on your Windows 98/2000/ME CD ROM, dialog box. We need to make a few changes from quickstart bar (bottom-left of your monitor) to 
search the CD-ROM for PWS and install. the normal set up for database work. leap out of UltraDev. 


os 


Now select the ‘nameofyourwebsite'’ directory. 
@ This is the directory which Personal Web 
Server will mimic a Windows NT server for: basically 


For any database work to be displayed on your 
computer, you now need to start Personal 
Web Server. Locate it in your Start directory, or 


double-click the shortcut, which should Eg Now double-click on Advanced, on the recreating all the functionality of a full Server for 
automatically be created after installation, and left-hand side of the pop-up console and then you to test your published .asp pages on! Make sure 
click ‘start’. click on Properties, which will appear mid-right. Read, Execute and Scripts are all checked. 


In the right-hand side of the screen, right-click 

We have now set up a directory for the and create two folders: Data and Images. 

Website, linked up to the Personal Web Server. —_ U/traDev will add a third, called Connections, 
Re-enter U/traDev and click on the Application automatically in a few steps’ time. Then right-click ston 
Server tab. We are going to be using ASP 2.0, VB and create these files: search.asp, results.asp and : : . 
Script with a page extension of .asp. At the bottom results_big.asp. Copy the pre-created database Double-click on the search page, organise your 
of the box is a URL prefix box. Make sure this only ‘computerArtsSpecial.mdb' from the CD-ROM to screen real estate (make sure Data Bindings is 
has http://localhost in it. (Note the differences in the Data directory and the image files from the turned on via Window>Data Bindings or Ctrl+F10). 
this set-up between versions 1 and 4). CD-ROM into the Images directory. We're now going to get ourselves connected! 
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Part 2: Getting connected 
Our searchable image library now needs a Data Source Name... 


Extending 
functionality 


To extend the functionality of the 
database, you can enter the 
database in access, select the 
table and open it in DESIGN 
VIEW. You can then easily add 
new columns which will in turn 
hold more information about the 
image, enabling a refined search. 


[ese aes ee alae 
In the connection input box, type 
‘connComputerArts’. In the field below, 
which has a list of DSNs already inserted, click the 
Define button. We are going to set up a unique DSN 
for this project. 


From the page we have just called up, go to 
the Modify menu and select Connections. 
Things are about to get interesting. From the 
dialog box which appears, click New and select DSN 
(Data Source Name). 


T = 
Ey This is the final dialog box, you will be pleased 
= to hear, and it's all downhill from this moment! 

In the DSN field, type in ‘dsnComputerArtsSpecial’. 

Below this, select the database we have created for 

the project, and navigate to it: it should be located 

here (if not, repeat the end of step 8 in part 1).: 

C:/inetpub/wwwroot/nameofyourwebsite/data. 


4 From the new dialog box, select the first 
option - Microsoft Access Driver .mdb. This 
enables us to hook up an access database, which 
has the extension of .mdb. Then click Finish. 


Well done! That was tricky, but now 

everything is set up for our searchable image 
library. Check that everything is correct and working 
by clicking on the Test button: a a pop-up box 
appears telling you the connection was made 
successfully. This means the DSN now successfully 
links your Web pages, the Personal Web Server and 
the database together. 


ao 
Fy Click OK and you can now see the connection 


we have created, connComputerArts in the 
connections box. Click Done. 


[hier Foleo 


EY After clicking Define, you will get a new dialog 
box with a number of different tags at the top. 
We need to select System DSN, which will create a 
Data Source Name on your computer system. Click 
on the Add button. 


Click OK twice to get from the past two dialog 

boxes to the DSN dialog we saw earlier. Now, 
from the DSN dropdown, you will see the new DSN 
we have created, dsnComputerArts. Select this. 


(reason peers y 


Click Site>Site files (or press F8) to return to the 
M® site files page. You should now see a new folder 
called Connections. This contains a file which has all 
the information about the connection to the 
database we just created. Double-click on the 
search.asp page, it's time to create the Web pages! > 
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Part 3: Search page 


Creating a tabular representation of all the elements that will appear in the database 


Filtering 
information 
SQL, Structured Query 


Language, is a mammoth set of 


different rules for filtering 


specific pieces of information. 


Ata basic level you Select” 
(everything) FROM (name 
of a table in a database) 
WHERE (Something equals 
something/is greater than 


something/less than something) 
ORDER BY (name of database 


field) ASC (ascending) or 
DESC (Descending). 


Back-end systems 


You can create an insert page 
to insert text from input boxes 


directly into the database, 


rather than manually having to 


open the database to modify 
fields. Combined with the 
Amend Record and Delete 
Record commands, you can 
create complete back-end 
maintenance systems. 
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In your toolbar, click where it says Common, 
and select Form. This brings up all the 


elements which you can create forms with. 


Click anywhere within the table. At the 
bottom of your screen, click the Form tag to 


activate the Form Properties. 


Along the top row, type in Image Name, Image 
Section and Thumbnail in separate cells. 


Insert a form, and inside the form insert a table 

(Ctrl+Alt+T) which has three rows, two 
columns, a width of 450 pixels, Cell Spacing of 3 
and Cell Padding of 3. 


Make sure that ‘Get' is selected as the method 

and that the action has ‘results.asp' typed in. 
This means that when the form is submitted, it will 
go to the results page. Because we used the ‘Get' 
method, the text input information is passed on to 
the next page as a URL and can be retrieved with 
certain .ASP commands which we will use. 


8 | In the Data Bindings box, click the + symbol 
and select Recordset. You will be presented 
with 1 of 2 layouts, Simple or Advanced. If 
Advanced has appeared, click the Simple button to 
make things look a lot more user-friendly. 


em Type in ‘Image Name’ in the top left cell, insert 

m® a text field to its right, named ‘s_name' (it's 
important to name this exactly) and make it 40 units 
wide. In the middle-left cell, type in ‘Image Section’, 
insert a menu dropdown to its right. Insert 
Entertainment, Sport and Music as the three options 
in the menu. Name the menu ‘s_section’. 


Believe it or not, that is all you need to create a 

search page! Save and open the results.asp 
page we created earlier. Again create a form with a 
table, this time with three columns and three tables, 
otherwise the same dimensions as before. Also, 
make sure the method on the form is ‘Get’. 


With the Simple Recordset dialog open, type 

in ‘rsResults’ and select the connection we 
previously created from the Connection dropdown. 
The table ‘imagesearcher' from the database will 
be visible. 


Specified DSNs 


When you transfer your files over 
to a host on the Internet, make 
sure they allow you to create 
your own DSNs (Data Source 
Names). Also check which 
directory they require you to hold 
the database in, because some 
hosts only have one writeable 
directory on their hosting plan. 


Click the Test button to see a tabular 

representation of all the elements which have 
been created in the database. This means 
everything is presently working, the database is 
hooked up correctly and you can now transfer 
records (hence Recordset) from the database to be 
used in your Web pages. 


Drag the ‘rsResults.imageFilethumb’ 

element so that it's underneath the 
thumbnail text. Click on the new split screen feature 
to make part of the code viewable, and click on the 
rsResults.imageFilethumb element on the WYSIWIG 
part of the screen. A piece of code is highlighted. 


Select the row of rsResults elements 
contained within the table onscreen. Now click 
the + icon on the Servers Behaviour dialog box, and 
you will see a list of options which will add the 
required functionality to our searchable page. Select 
Repeat Region. 


ss erties 


Click OK twice, so the Recordset dialog 
disappears. You will see the newly created 
Recordset in your Data Bindings menu. Make sure it 
is expanded so you can see the elements which are 

contained in the Recordset. 


To the left of the highlighted code, type in 

this exactly: <IMG SRC='images/ and on the 
right-hand side of the highlighted text type in 
‘>. You will see the rsResults.imageFilethumb text in 
the table turn into a dynamic image! 


beens 
Anew dialog appears, click the ‘repeat all 

records’ radio button and click OK. This will 
now repeat the row of elements selected in the 
table, enabling us to see all the dynamic elements of 
our database appear onscreen. 


From the Data Bindings dialog, drag the 


12 rsResults.imagename to the cell underneath 


‘image name’ in the table, and do the same for 
image section. Now comes the tricky part — inserting 
the dynamic image. 


ne 


15 Close the split screen mode. Next to the 

Data Bindings tab is the Servers Behaviour tab. 
Click this to activate it, and you will see all the 
dynamic attributes and any behaviours which are on 
the page. There aren't many at present, but we are 
going to add some! 


You've earned a preview now. Press F12 to 

preview the page. If you get a message saying 
‘preview in Live Data Server is not selected’, do you 
wish to do so? Click OK and tick the ‘preview in Live 
Data Server’ box which appears. Now preview, and, 
lo and behold, the full list of inage names, the 
section each image is in and the thumbnail of each 
image will appear! Well done. > 
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Part 4: Loose ends 


Using SQL to filter out the results information... 


The way forward 


Regardless of what you think 
about the industry, database 
driven solutions are the only way 
it will survive. Companies will 
not shell out for HTML experts to 
modify text on their Websites 
forever — many are making 

the change to dynamic content 
at the moment. Now is the time 
to learn. 
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We now have to make the results filter, so that 

when the search page passes information to 
the results page, the results page will filter out the 
exact information we want. The language which 
enables us to do this is called SQL (techies refer to 
this as sequel). Re-click on the Data Bindings tab 
and double-click on the Recordset. Click on the 
Advanced tab. 


In the bottom row of the table, type ‘Sorry no 
results’. Select the text and select ‘show region 
if recordset is empty’ from the Server Behaviours 
dropdown. Save. Go to your search page and test, 
initially by selecting a category from the dropdown 
box. Afterwards, try a name. All the images are 
named ‘Number ?’. Try a search for a non-existent 
name, and the ‘Sorry, no results’ text appears. 


Create a Recordset, as before, this time 

named rsResultsBig. We still want to be on 
Simple mode. Select ‘Filter ID = URL parameter ID’ 
and click OK. 


You now have to type in a small piece of 

= non-tricky SQL, which we have already 
prepared. Under ‘from ImageSearcher’ in the SQL 
box, type in the following exactly with an enter / 
line break before the Order By statement. 


WHERE imagename Like ‘%' & ‘r_name’ &‘%' 
AND imageSection Like ‘%' & ‘r_section’ &‘%' 
ORDER BY id asc 


Now return to your results page, we are going 
m® to make the thumbnail clickable and go to the 
larger version of the image. Select the dynamic 
image and go to your Server Behaviours. Select ‘go 
to detail page’. You will see this dialog box pop up. 


Drag ‘rsResultsBig.ImageFileFull’ to the 


page, and type in ‘Return to search page’ 
and ‘return to search results page’. Make links from 


each of the text elements. Go to split screen mode 
again, and add the same code pieces to the 


rsResultsBig element. 


PSone z 
3 | In the Variables box, the following two lines 
must be added: 
Name: r_name 
Value: % 
Run-time value: Request.QueryString(“s_name”) 
Name: r_section 


Value: % 
Run-time value: Request.QueryString(“s_section”) 


Click Test. If you get the same screen as before, then 
it's all done and dusted. If not, re-check that the last 
two steps have been followed exactly. Click OK. 


Sy Click the Pass URL Parameters checkbox and 

make the detail page ‘results_big.asp', which 
we created earlier. Click OK, save the page and 
open ‘results_big.asp’ which we created at the start 
of the project. 


€ 


Well done! You now have a completely 

= searchable database of pictures, with names, 
sections and thumbnails. Give it a try. You can use 
the database we have included to add your own 
photos, thumbnails and use your own photo names 
and section criteria. Think of the possibilities! 


+ Dynamic content on the 


al every issue with 
| } duat-format CD-ROM 


- Web: dynamic content tutorial 
+ Photoshop: natural media series 
- On the CD: 50 free Flash SFX 
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design plaza 


1. Is it a browser? Is it a site? In fact, it’s Design Plaza's 
Dreamweaver expertise in full effect, calling for an open mind 
for optimal viewing. 
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Desiqn Plaza 


Design Plaza’s site gives the humble browser a stylish 
Dreamweaver makeover. “When I use DHTML, I feel like a pioneer 
on an undiscovered piece of land,” says its creator, Anick le Cerf... 


ike the moment where an actor suddenly 
speaks to camera, or a familiar sample 
drifts out of an unfamiliartune, Design 
Plaza’s company site brings you face to face 
with the technology used to create and deliver it. 
When you visit, you're presented with an interface 
which looks like Internet Explorer has decided to tart 
itself up for a night out, subtly enhancing the 
functional nav bars and pop-up windows with a touch 
of eyecandy. It still does its job, introducing you to 
Design Plaza’s business, client portfolio, methodology 
and people, as any good business site should. But 
clever touches, such as the click and drag pop-up 


windows and the colour picker Eyedropper icon which 
selects staff biographies, bring the mechanics of 
design to the forefront. 

As a Web experience, it raises a host of design 
issues. The fact that the site was created almost 
entirely using the slower-downloading DHTML in 
Dreamweaver, coupled with its status as a Website for 
a design company, means that it runs the risk of 
alienating visitors with short attention spans. “It says 
that we can also create cutting-edge, experimental 
sites, not just corporate sites like the ones in our 
portfolio,” says Anick le Cerf, the site’s creator, from 
Design Plaza’s Belgium-based offices. She adds that a 
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Pop-up girl 


Anick’s nickname site, at [W] www.popupgirL.com, is a 
scrapbook-style affair containing links and musings 
on just about everything Anick-oriented. “| had 
planned a redesign for the May 1 reboot but couldn't 
find the time. The current version of popupgirl has 
been online since February last year and that’s much 
too long,” she says. “In the meanwhile, I've made 
changes and added things, but | can't go on like that 
forever. | have new content in mind, so | need a new 
design. But I've been very busy lately and | want the 
new site to be perfect, sol keep postponing it.” 


[w] www.scholz-und-volkmer.de - 
“| think this was the first DHTML 
site that I'd ever seen.” 


arts 


Dreamweaver Special 


[w] http://dyr.doubleyou.com/zara 
- “All the doubleyou sites are 
brilliant, especially the Zara site.” 


lighter version of the site is currently under 
development for less-experienced users. 

So why persevere with DHTML instead of Flash? 
“| thought it would be a much bigger challenge to make 
it in DHTML.| really wanted to do something that 
hadn't been done before - don't ask me why.” Anick had 
experimented with DHTML in her pre-Design Plaza 
days, but was discouraged by the belief that creating 
exciting DHTML sites required an in-depth knowledge 
of JavaScript. “But then | discovered the Dreamweaver 
Extensions and a whole new world opened up for me,” 
she says. 


A little help from my friends 


Design Plaza is a 12-strong design department within 
consultancy firm Andersen, a company that employs 
70,000 people. Although supported by the Java, ASP 
and software expertise of a network of other design 
units, it is self-promoting, has funky decor, and prides 
itself on adding a flourish of creativity to its output of 
user-centred business sites. 

Anick’s brief was to incorporate this creative 
independence into the site, and her initial inspiration 
came from [Ww] www.doorzon.nl, a Dutch comic book 
site. “| got the idea to make an interface which looks 
more like a real browser so that at first glance you'd 
think it was one, kind of like a trompe l'oeil painting,” 
she says. 

Having decided on the browser as a style metaphor, 
she introduced the site’s draggable tab windows, 
colour picker, history movie and layer-like portfolio 
structure to incorporate Design Plaza’s emphasis on 
user-friendliness. 

The challenges at first seemed so insurmountable 
that she thought she might have to resort to Flash after 
all. “The first problem was the nested layers. When | 
viewed the site in Netscape, all the layers appeared 
underneath each other instead of nested, so! posted 
the question to the DW Newsgroup,” she says. “Al 
Sparber from Project VII replied, saying that nested 
layers has to be declared in the style sheet, not inline, 


[w] http://alhambra.seat.es — “And 
this one...” 


[w] www.anoto.com - “I really like 
the fading from the line drawing into 
the photograph. At first | thought it 

was done with Flash but it isn't. | also 
like the sliding text layers.” 


and that was one of Dreamweaver’s limitations that 
you couldn't turn off its writing of inline styles,” 
she explains. 

Luckily, a command downloaded from 
[w] www.yaromat.com (see boxout) called Layer2Style 
saved the day. Further eccentricities revealed 
themselves when Anick combined DHTML and Flash 
movies, which still appear on a Mac even though 
they're sitting on an invisible layer. Craig Foster on 
the DWnewsgroup suggested moving the Flash layer 
off-screen to hide it and back to display it, and the 
problem was solved. “Before consulting the newsgroup 
| had already tried out a hundred things that didn't 
work,” Anick says. 


Browser blues 


Anick’s experiences will be familiar to many designers 
who have wrestled with idiosyncratic browser 
requirements, and she is equally grateful to the 
community of sites offering Dreamweaver Extensions 
— aresource that any ambitious Dreamweaver user 
ignores at their peril. 

Luckily for Anick, she enjoys the challenge of 
fighting the battle against browser restrictions, and 
although Flash may present an easier solution than 
DHTML, she has learned to exploit restrictions and 
use them as a source of inspiration. As a result of the 
Design Plaza site, many people now approach her as 
an expert programmer, but she demurs, instead 
believing that its success is down to the fact that she 
knows how to use Dreamweaver efficiently. “Some 
people say that | want too much and that | have to 
focus either on design or on the more technical stuff, 
but | really can't do that,” she explains. “For me the 
beauty of Web design lies in the combination of the 
creative and the technical.” 


[w] www.bang-olufsen.com/ - 
“Nice and subtle usage of DHTML in 
combination with Flash.” 


Tourisme 


Wi Le Centre de ressources propose gratuitement des brochures touristiques sur fa France et 
les territoires d'outre-mer (Guadeloupe, Martinique, Réunion.) 
Nous pouvons également vous aider pour Ja recherche de certaines informations (heures 
ouverture des musées, dates des expositions... 
Nous préparons @ I'avance la documentation afin de vous 1a remettre lors de votre visite 
au Centre. Pour des recherches plus poussées, nous vous demandons un délai de quelques 
fours. 


W Alors, si vous avez une question, envoyez un message ¢ Isabelle Ducreuzet 


@ Vous pouvez égatement faire vos recherche vous méme sur ie site de Ia Maison de ta France. Vous y 
trouverez notamment les adresses des offices du tourisme et des syndicats d'initiatives 
vow franceguide com 


Pour toute information ou pour l'envai de brochures ou d'affiches, vous pouvez adresser votre demande @ Maison de 


\a France: par messagerie électronique 
franca 
par fax 02/514 33 75 

par teléphone: 02/ 505 382 


1. Design Plaza created the 
Centre Culturel Frangais site 
for students, multimedia 
devotees and culture 
vultures to navigate with the 
minimum of fuss. 


2. Let's Move, a site 
concerned with getting 
around Belgium and 
travelling to other parts of 
Europe, reflects its kinetic 
theme with a riot of 
animated text and imagery. 


3. Not content with a group 
email invite, even Design 


Command and conquer 


The full range of Dreamweaver extensions Anick used 
for the Design Plaza site are listed below, and can be 
found at the following addresses: 


[Ww] www.macromedia.com/exchange/ 
[w] www.projectseven.com, and 


[W] www.yaromat.com. 


Clip layer (Massimo Foti) - Changes the clipping 


Plaza’s digital party flyers ; hee, 
make your head spin. values of any layer - used by Anick to minimize and 
"apo t 4. The My Way car maximize the layers. 
be Wh no Cas erman b@ company site offers 
ear as ; tantalising clickthrough Drag Layer (Yaromat) — A patch for the Macromedia 
Votre guide mobilite views of the cars on sale. ; age : 
Design Plaza also developed drag layer which enables layer dragging in Mozilla 


a browser-based 
touch-screen application for 
the client's car centre. 


5. The colourful characters 


M18/Netscape 6. 


Layer Anti-Magic (Project VII) - Used for horizontally 
scrolling text - put your layers in motion. 


at Design Plaza introduce 
4 ies themselves in typically 
ee ne design-conscious style, ‘ ie ; 
Reatobe courtesy ofthe Eyedropper Layer on Top (Massimo Foti) - Moves any layer at the 
SS selection tool. top of the z-order when you click on it or when you 


6. Anick’s original 


click on its link in the browser. 


inspiration was a Dutch 

comic book site, Layer2Style (Yaromat) - Moves the inline style 

[w] www.doorzon.nl, ¢ : ; 

offering a nascent take on information of nested layers to the head into a style 
7. sll the concept of the tag. Solves the NS-nested layers problem. 


A new way of buying a car 


Our offer includes: 


* Basents car shopping in Qreaznbos, Brussels; 
* Direct access to 300 cars, all makes, up to 5 years; 
* Aglobal car solution induding: 


My War Insurances 


© Total quality standards, 


My Way offers you a new way of buying @ car, proposed by D'leteren, 


Cars of the week 


The dtr cae 

Ine medium-sized car 
The tamiy car 

The Mey 

The cabritet 


browser-based site. 


Move layer (Massimo Foti) - Move any layerto a new 
position. Anick used it to move the layers with Flash 
off the screen, for example, to a position with a value 
of —2000. 


Netscape 6 Show/Hide layer (Al Sparber) - 
Implements Show-Hide Layer. Adapted for Netscape 
6 compatibility. 


Click on the eyedropper (7) and 
choose (dick) a color to find out more 
about the Design Plaza team. 


Note: 


Requires the Flash 5 plugin, 


1M! Not working on IE on Mac and on NSé 


‘on both PC and Mac. 
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Creating pop-up 
menus in Fireworks 


We show you how to set up a navigation bar 


Expertise provided by Susannah Hall, 
who specialises in publishing software 
and teaching people to use Internet 

fe] susannah@dial pipex.com. For more 
details, [W] www.susannahhall.com. 


Files on disc 

Tutorial files are on the cover CD in the 
‘tutorial/ Fireworks folder. 

Dreamweaver 4/Fireworks 4 studio is 

available price £349, upgrade £149 

exc. VAL More info on prices at 

[w] www.macromedia.com 
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in Fireworks and incorporate it into a 
Dreamweaver template for easy updating 


F f you were wondering how 
q to set up the navigation for 
your site, the new pop-up 


} menus that Fireworks 


generates offer a neat way of linking to 


other pages in your site. The steps to 
setting them up are outlined here and we 
also show you how to incorporate your 
navigation bar into a Dreamweaver 
template. Essentially this involves 
defining which parts of the file you need 
to change when creating the HTML files 


out of the template. Don't worry if this 
has foxed you until now, this tutorial 
takes you through the process. 

The main advantage of using a 
template is that when you need to 
change your navigation bar, you add the 
new version to yourtemplate and DW 
automatically updates all the HTML files 
created from the template. It also acts as 
a base for users unfamiliar with DWto 
add text and pictures to HTML files 
without damaging any of the code. 


Part 1: Designing the layout 


We start by launching Fireworks to design the layout, using 
the files on the CD 


CD files 


Layout.png gives you the base of 
the navigation bar and there are 
three pictures to add to the 
HTML files: steppyramid.jpg (for 
egypt-htm), gozotemple.jpg (for 
matta.htm) and nile.jpg (for 
nile.htm). 


se | 


TOURS TO SACRED SI 


Designing your 
button 


For these buttons, we've used a 
sandy colour (#FFCC99) which is 
the same colour as the 
background and is reminiscent of 
the hot dry climate of Egypt, 
Malta and Gozo. As an Effect, 
we've chosen the Raised Emboss 
and used the Inset Emboss for 


We are going to create four rollover buttons 


the Ovecaeeas: across the top. Go to Insert and select New 
a Open step1.png from the CD folder — it gives Button. In the space that appears, draw a rectangle 
you a head start on the design. The width of 112 pixels wide and 40 pixels deep. Use the Info 
The other menu the file is 760 pixels which enables it to fiton an 800 _ palette to check, and if necessary change the size. 
The menu items added forthis pixel resolution monitor. 


Give the rectangle the design and colour you want. 
menu were Ancient Egypt, linking 


toancient.htm, Sacred Geometry 
linking to geometry.htm and 
Temples of Ancient Egypt, linking 
totemple.htm. 


Check under the Command menu and you will 

find that it has appeared there. Back to the 
button though. The Up state is finished, so click the 
Over tab and click Copy Up Graphic. Select the 
rectangle. Delete the Raised Emboss by highlighting 
it and click the trash bin. Apply an Inset Emboss. 


4 | Go to the History palette and use the Shift key 
to select both Align commands that appear 
there. Use the menu on the side of the palette 
(where the arrow points to the right) and select Save 
as Command. Name the command Align Centre 
and click OK. 


5 nemvmes | meme 
TOURS TO SACRED SITES 


8 | This dialog box appears. It asks you to add the 
text for each menu item and the URL for the 
file it links to. There are two items: ‘Malta and Gozo’ 
linking to malta.htm and ‘Egypt’ linking to 
‘egypt.htm’. You need to click the plus sign to add 
each item to the menu. 


7 Now we are going to add the pop-up menus 
to the two buttons. Select the first button (or 
in fact the slice on top of the first button) and click 
in the target in the middle of the button. Select Add 
Pop Up Menu. 


Add the text ‘Forthcoming Tours’. To make 

sure it is centred in the rectangle, select both 
the text and the rectangle (hold down the Shift key) 
and under Modify>Align, choose Align Horizontal 
and Align Vertical. To avoid having to repeat these 
last two steps, we will make a new command. 


G That's the first button finished, so close this 
box and position the button on the layout. 
Now repeat the process to create the next button. 
The text for this button is ‘Talks and Workshops’. 
This time you can use the Align Centre command 
under the Command menu to centre the text within 
the rectangle. 


9 | Once you have done that, click Next at the 
bottom and you can design how your menu 
will look. We are going to use an HTML style — you 
can choose the style and colours of the text — 
Fireworks helpfully provides you with a preview. 
Once you're happy, click Finish. > 
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10 An outline of the menu is visible and you can 
click and drag it into position. We dragged 
ours so that it appears neatly under the button. 
Create the menu for the other button and then 
check that everything is working by pressing F12 to 
preview the file in the Browser. 


13 | Go to File and Export. Fireworks should 
automatically have worked out that you want 
both an HTML file and your images. Create a new 
folder on your desktop called ‘Sacred Sites’ and 


check the ‘Put images in Subfolder' at the bottom of 


the dialog box. Then save the file as layout.htm into 
the Sacred Sites folder. 


SENNA AN Se 


FR 


a You can make changes by selecting the slice 
and double-clicking the outline of the menu. 
Now you are ready to export the file. Although the 
file will be sliced (because the buttons already are), 
we have no control over the Export settings for each 
slice. So draw slices over the other areas as shown. 


PORCHICONMNC 
TOURS 


TOU! 


14 Before closing this file, you need to save it so 
you can return and make changes if necessary. 
Go to File and Save As and save it as Layout.png in 
the ‘Sacred Sites’ folder. Then close Fireworks and 
launch Dreamweaver. 


12 Select each slice and choose the Export settings 
under the Optimise palette. For the areas 
including photographs, JPEG settings will be best 
and for the text areas, leave the setting as GIF. You 
can preview the file, clicking on each slice to see 
how the exported version will look. 


15 Before you do anything else, you need to 
create a site in Dreamweaver, so go to Site and 
choose New Site. Name the site ‘Sacred Sites Tours’ 
and choose the ‘Sacred Sites’ folder on your desktop 
as the local root folder. Start a new file and you are 
ready to create your template. 


Part 2: Setting up your template 


The next stage is to create a template that will be used as the base for each 
of the files in the site 


Using Editable 
Regions 

Making only selected parts of 
your template Editable Regions 
restricts what can be changed in 
the file. It is a particularly useful 
way of creating files that people 
with minimal knowledge of 
Dreamweavercan change. 


Sizing the table 


When you add the table, you 
want it to match the width of the 
navigation bar. So specify the 
width in pixels as 760 pixels 
wide. The table is going to be 
used for layout purposes, so you 
don't want it to have a border. 
However, you may well want to 
add some cell padding to create 
some space between the text and 
the picture. 
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1 | Save your file as a template, calling it Template, 
and click the Insert Fireworks HTML button in 
the Objects panel. Browse and choose the file 
layout.htm you just generated. The navigation bar 
should appear in an HTML table. Underneath, 
create another table with two columns which will 
hold a picture in one and text in the other. 


a At this point, we need to create some Editable 
Regions so content can be added to the 
Template. Click in the left column of the bottom 
table and under Modify>Templates, choose New 
Editable Region. Call it picture and click OK. 


“aeagen/ eteppreemid. 39a” widtde"ZEN™ bei ghe=*L Es" 
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Travel to Egypt to visit the. 
Sacred Sites 


8 | Repeat this process for the other table column, 
then re-save and close the template. Now to 
create a few files from the template: select New 
from Template (File menu). There are a number of 
pictures you can use in the CD folder. Create at least 
the two files ‘egypt.htm’ and ‘malta.htm’. 


Using templates 


When you create a new file 
from a template you will find that 
you can only change the areas 
you have defined as Editable. 

In this example, you will find 
you can only add content to 

the two columns of the table 
created under the navigation 
bar. Although one region is 
named Picture and the other 
Text, you can add any content in 
those areas. 


Changing 
templates and 
updating your files 
Now if you imagine you want to 
expand your site and add some 
new files, you will need to add 
some additional items to the 
pop-up menus. 


4 | To change the pop-up menus, we need to 
return to Fireworks and open our original file, 
Layout.png. Select the slice over the first button and 
double-click the menu outline to make the change. 
Add another item, Nile cruises which will point to 
nile.htm and click Next and Finish. 


7/48 ani.3979</ EAE 


yt Languages *Javadoripry.. 


bgcolor="#rrri 


"#000000" onLoad="Rl_preicadinages|('../images/ leyout_ri_| 
/smages/ Layout _¢' 


tenes 
(picture) 


ae a 


At the top of the table containing the 

navigation bar you should see a yellow anchor. 
You need to select that as well as the entire table 
containing the images and delete them. If you check 
the HTML source code, you should find that most of 
the code has been removed. 


10 To finish off, we are going to add some 
contact details to the Template. Under the 
bottom table, create another table with a single 
column with a width of 760 pixels. Inside the table, 
add ‘Contact us about tours in Egypt at 
egypt@sacredsitestours.co.uk’. 


Gg You can export the file, just as you did before 
with the same settings. Fireworks should ask 
you if you want to replace the files, which you do. 
Don't forget to re-save your original PNG file as 
well. Now return to Dreamweaver. 


SS, 5A ID ia a 


EApEL.2" sece™../te_menu.ja"></eeripe> 


 cexee"9000000" 


eder="O" oRlipadding="s"> 


8 | Now you can put the new navigation bar into 
place by clicking the Insert Fireworks HTML 
button and browsing to find the file layout.html. 
When you click OK, the navigation bar should 
appear. Test that it works by previewing the file in 
the Browser (press F12). 


Ga Egypt, so we need to set up the template so 


that we can change the text to make it relevant for 
Maltese tours. Highlight the words ‘Egypt at 
egypt@sacredsitestours.co.uk’ and go to 


Modify>Templates, and select New Editable Region. 


Save the template and again update your files. 


EACLePUNeseied Documenc</eitler 
cmate Dt p-equiv="Concent~Type” Goncent="teKt/heml: charset=i90-H899-1"9 


G Open the template in your templates folder 
with the extension .dwt. Now this is the tricky 
bit: we have to replace the entire navigation bar, 
including all the code. That way we can be sure that 
the changes we have made are included. 


(prerarel <= #8 
(text)<i-> #inaeaitas 


9 | Now you are ready to re-save the Template. 
When you do (as normal by selecting Save 
from the File menu) Dreamweaver will ask you if 
you want to update your files. Click Update and the 
latest version of the navigation bar will be added to 
the files created earlier. 


Cruise along the Nile 
visiting the sacred sites o' 


G For existing files and any new ones you create, 

you will find you can only change text which is 
included in the Editable Region. Now just create the 
file about Nile Cruises (nile.htm) from the template 
and you're finished. Congratulations! FEES 


Dreamweaver Special 


arts 


UK (Direct Debit) £59.00 (SAVE £37) 
UK (cheque/credit card) £59.00 
Europe (inc Eire & N America)” £82.00 
Rest of the world” £99.00 


YOUR DETAILS 


* AIRMAIL 


Daytime telephone number ___ 
Email address __ 
PAYMENT METHODS 
Please choose your method of payment 1, 2, 3or4 


Lo Direct Debit. (Uk only) Complete the form below. Full amount will be 
deducted in advance and in one lump sum 


2 « C1 Cheque Payable to Computer Arts Specials. Sterling cheques drawn on 


aUK account 
3. C1 Visa CJ MasterCard 


4, C Switch Issue no and valid date 


Your subscription will start with the next available issue 


UK readers return this coupon (no stamp required) to: 

Future Publishing, FREEPOST BS4900, Somerton, Somerset, TAI! 6BR. 
Overseas readers return this coupon (postage payable) to: 

Future Publishing, Cary Court, Somerton, Somerset, TAT! 6TB, UK. 


[Trtease tick this box if you would prefer not to receive information on other offers. 
Instruction to your Bank or Building Society to pay Direct Debits. 
Originator’s Identification Number 


a 9} 3} 0} 7] 6] 3) 


Fi sid Ltd, 
Cay Col Please send this form to address shown 


peat TAN GOR BR 

1, Name and full postal address of your Bank or Building Society branch 

To: The Manager 

Bank/Building Society 


Address. 


2, eee Sei Postcoue 


2. Name(s) of 
account holder(s) 


3. Branch sort code (trom the a | 

top right hand corner of your cheque) 

4. Bank or Building Society 

account number | | Lt ma | 
5. Instruction to your Bank or Building Society 

Please pay Future Publishing Direct Debits from the account detailed on this Instruction subject 


to the safeguards assured by the Direct Debit Guarantee. | understand that this instruction may 
remain with Future Publishing and if so, details will be passed electronically to my bank or build- 


Yous may I this blank form and then pera it. 
You cannot fax or e-mail direct debit forms. 


Order code: Offer ends 30.07.01 


SE eeeneeeEeememeEEeeeEE come 


- Great savings! 


- Every issue delivered 
direct to your door 
(Free in the UK) 


‘ Never miss an issue 
of your favourite 
magazines 


Receive the next 12 issues of Computer Arts AND 
the next six issues of Computer Arts Specials 
(now out monthly). 


All Computer Arts subscribers receive a unique 
limited edition copy with the cover image 
intact and uncluttered by words. 


all the details you need to 
complete the direct debit form are on your 
cheques? 


Subscribe to both Computer Arts and Computer Arts Specials and 


4 compu: 
rt 


a= 


Computer mo anton the 'Wab + V 
of 4 
= hi 


( That's a39%o discount off the normal cover price ) 


+44 (0)1458 271108 
www.computerarts.co.uk/subscribe 


IMPORTANT: Please quote code: COSPJ21 when ordering. Telephone lines open 24 hours a day. 


arts 


Dreamweaver Special 


\\ 
us 
a 


nagement 
llaboration 


\ltustration: Magi 


w.magictorch, igom 


ctorch {t} 01273 620222 lw] ww 


Larger sites with multiple authors, databases and standards can be 
difficult for one person to manage, which is why Dreamweaver enables 
collaborative authors to get in on the act 


reamweavers array of site 
management and 
collaboration tools enable 
non-coders to become 
involved ina site’s development, with the 
result that the overall content better 
represents an organisation's purpose. 
The site manager can then 
concentrate on defining structure and 
permissions, providing templates and 
style sheets supporting standards and, 


use Dreamweaver’s site management 
tools to organise content and maintain a 
structured site that content authors can 
recognise easily. 

Using features such as Check 
In/Check Out enables any number of 
authors in a collaborative environment 
to access to pages without having to 
worry about whether another user is 
editing the same page. Authors can also 
add Design Notes providing information 


ona particular file which could be of 
relevance to other authors, such as the 
location of original files or source files 
for images, for example. Combined with 
the power of Dreamweavers Site 
window which enables mass movement 
of content and the ability to synchronise 
content between the local and remote 
servers, Dreamweavermakes site 
maintenance a lot easier for the site's 
manager and its contributors. 


Part 1: Set up your site 


A little advance planning can provide your site's authors with as much access as possible while ensuring 
that you still maintain control over the final site 


Site preferences 


You can further configure your 
site via Edit>Preferences. The 
site category provides options 
for Site Window Layout, FTP and 
Firewall preferences. 


Decide whether to provide remote access 


Working in a collaborative environment means directly to the hosting server or to an internal Whichever method of remote access is best for 

that other users must have access to your local development server. The advantage of the latter you, make sure the Check In and Check Out 
site. Define your site via Site>Define Sites so that means that you have ultimate control of files feature is active. Also, when configuring authors’ 
the local version is either on a mapped drive or transferred to the hosting server. The disadvantage versions, ensure that usernames and email 
preferably an internally available network location is that you need to keep tabs on the local and addresses are included so that users can recognise 
that other users can access easily. remote, plus the hosting server. who is working on a file at any given time. 


The Site Map Layout is useful in a collaborative 


L environment because you can define different The File View Columns enable you to define 
a By default, Dreamweaver activates Design home pages for different users. You may have G 


additional columns in the Site window that are 
Notes but double-check that both options are authors responsible for specific sections of your site, _ dependent on specific aspects of your page's related 
available or this feature will be disabled. This will in which case their home page can be defined so notes. You can then determine whether other users 
enable you to move files around and leave notes for _ that they can view their pages without being need access to this information or if this is mainly 
authors on its new location for example. concerned about areas out of their control. only useful to you as the site manager. 


Part 2: The Site window 


Many of the Site window's features are habitually unexplored. Being aware of some of these little-used 
features gives more flexibility to your site management habits 


@ The Site window provides many more - - 
The Synchronise feature is found under 


tools than just file management and FTP. BY Your site's structure is automatically mirrored 
Its core purpose is to organise your files by on the remote server as files are transferred. Site>Synchronise and enables you to work 
intelligently recognising the relationship between New directories are automatically created. The with either the entire site or selected local files only. 
pages and their dependent files. This enables youto — Synchronise feature makes it possible to maintain You can then determine whether you need to 
re-organise your files without worrying about exact duplicates on the local and remote servers as upload or download newer files to or from the 
broken links or missing graphics. files are uploaded and redundant files deleted. remote site or a combination of the two. > 
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Part 2: The Site window continued... 


Ultimate 
organisation 


Tweaking Dreamweaver's 
interface as we have here, 
provides a comfortable 
environment for non-technical 
authors. Templates make it 
simpler for editors to simply cut 
and paste content. CSS 
definition of page elements 
and formatting mean you can 
be even more confident that 
your site complies with 
established standards. 


Reports can also be found under the Site 

menu. These provide information on your 
team's workflow as well as practical reports on 
inefficient code. Reports can be carried out on 
individual files, selected files, complete folders or 
your entire site. Further options for the workflow 
options are made available when selected via the 
Report Setting button. 


Authors responsible for particular areas held in 


specific folders will find it useful to specify 
pages as the root. Select it a file and choose 
View>View As Root (PC) or Site>Site Map 
View>View As Root (Mac) option. Lower level files 
are still accessible in the local folder and can be 
re-activated using the Site Navigation pane above 
the Site map. 


Using the Site Map View provides authors with 

a visual representation of the site and offers an 
alternative method of organising your site. Selecting 
a file prompts the Cross-hairs tool that you can drag 
to another file, automatically creating a link without 
the need to open individual files for editing. 


8 | Non-technical authors may feel more 
comfortable viewing the Site map using the 
file's title tag instead of its (possibly) non-descriptive 
filename. This can be toggled via the View>Show 
Page Titles (PC) or Site>Site Map View>Show Page 
Titles (Mac) feature. 


G When working in this way, it is useful to be 
aware of the various options available towards 
the bottom of the Site menu which enable you to 
create, amend and delete links. It's also possible to 
directly access the source of the link so you can edit 
it to match your site's standards, for example. 


Hiding files may be useful for maintaining 

an easy-to-understand Site map. A file used 
as a scripting element for example, can be hidden 
from view completely — non-technical editors can 
then concentrate on content that is relevant to them 
without being confused or inadvertently deleting 
such files. 


Part 3: Check it out 


Dreamweaver's Check In/Check Out feature ensures that work isn't duplicated or overwritten should two 
users need to simultaneously edit the same page 
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g We configured the Check In/Check Out 
feature when defining the site earlier, but if in 
doubt, go to Site>Define Sites and ensure this is 
selected under the Remote Info category in the left 
of the window. 


Each user must have a unique identification 

and email address so that they can be 
recognised. This information is then displayed in a 
Site window column so that colleagues can mail 
each other should they be working on a file that 
needs attention. 


Folder 6/01 832PM 
‘1KB HTML Do... 6/2/01 10:40AM 
1KB HTML Do... 6/2/01 10:04 AM 
‘1KB HTML Do. 6/2/01 8.14PM 
1KB HTML Do... 6/3/01 $39 PM 
‘1KB HTML Do... 6/2/01 6.55PM 


Checking Out a file means that you have 
downloaded the file from the remote server. 
It's marked with a green check mark so that other 
users can see that someone is working on it. Do this 
by selecting any number of files and clicking on the 
Check Out icon at the top of the Site window. 


Part 3: Check it out continued... 


Me, myself and | 


The Check In/Check Out feature 
has benefits if you work on your 
site at different times using a 
work computer, home computer 
and laptop for example. Create 
three different IDs so you know 
which location has the most 
recent version of any files you 
have been working on. 


4 Checked Out files cannot be opened or edited 
until they have been checked in, but they can 
be overwritten if used by another FTP client. 
However, in applications other than Dreamweaver, 
a temporary copy of the checked out file is created 
with an .LCK extension to prevent such incidents. 


| 


Should a file be checked out in error, 

it is possible to undo by choosing Site>Undo 
Check Out or by using the contextual menu 
available by right-clicking on the PC or 
Control-clicking on the Mac. 


Folder . 
1KB HTML Do... 6/2/01 10:40AM 
1KB HTML Do... 6/2/01 10:04 AM 
1KB HTML Do... 6/2/01 8:14 PM 
KB HTML Do... 6/3/01 $39 PM 
KB HTML Do. 6/2/01 6:55 PM 


If another user has checked out a file then a 

red check mark is visible along with their name 
in the Site window. This file will be unavailable to 
anyone else until it has been checked back in by the 
editor working on it. 


8 It is also possible to check in and check out files 
from the Document window using the File 
Management dropdown on the toolbar. Be careful 
though if you check out the currently active file 
because the content will be overwritten by the new 
checked out version. 


1B HTML Do... 
1KB HTML Do. 
1KB HTML Do. 
1KB HTML Do. 
1KB HTML Do. 


Gg Checking files back in is a similar process to 
checking out in that you select checked-out or 
new files from the local folder and click the Check In 
icon at the top of the Site window. A lock symbol 
then indicates that the file is read-only (PC) or 
locked (Mac). 


9 | When checking in a file using this method the 
file may be automatically saved depending on 
the Preference options set in your Site Preferences 

under Edit>Preferences and then Site category. 


Part 4: Take note 


This feature, which acts rather like digital Post-it notes, enables you to share comments on relevant files 


with other editors in your team 


Show When Filels Opened 


Most sites are all about communication, so it's 

essential that multiple authors are aware of 
any implications that their changes might have on a 
file. Notes are a way for editors to communicate 
such information and ensure that subsequent 
authors are aware of such considerations. 


Design Notes are activated by default but you 

can double-check their status on your site 
through the Design Notes category in the Site 
Definition window. Any notes relating to specific 
files are automatically modified when their parent 
file is amended, moved or deleted. 


Choosing to upload Notes with files means 

that other users can see your notes which can 
be crucial in a collaborative environment. However, 
as the site manager, you might choose not to 
activate this feature for your own use. > 
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‘1KB HTML Do. 
1KB HTML Do... 
1KB HTML Do. 
1KB HTML Do. 
‘1KB HTML Do. 


a Files with Notes attached are clearly 
identifiable through the Site window from the 
available icon that appears. Double-clicking the icon 
will automatically open the note directly without 
needing to open the file first. 


attention 
notes = 6/2/01: this is an admin page and should not be edited 
showOnOpen = true 
ions = Allow Jazz access to this page 


The All Info tab provides more detailed 

possibilities where you can include information 
such as the file's owner for example. Clicking the + 
symbol creates blank name and value fields for you 
to create new comments. 


10} Notes can provide comprehensive information 
about your site and as such, you may need to 
plan them out beforehand. From the Site window 
choose View>File View Columns (PC) or 

Site>Site File View>File View Columns (Mac) to 
configure the Site window so that it best displays 
your preferences. 


dex. htm">catalogue pag 


: in</a2f</p> 


There are a number of methods of adding 

Design Notes. You can choose File>Design 
Notes from within the Document or Site windows or 
simply double-click in the Notes column next to the 
appropriate file. 


8 | Click OK when you've completed your Notes. 
The Notes are then created in a folder hidden 
in Dreamweaver called _notes. This can be viewed 
and opened outside of Dreamweaver to reveal a file 
with a .MNO extension. A note file associated with 
index.htm will become index.htm.mno for example. 


o You can add new columns by clicking the + 
symbol and delete them using the - symbol. 
To rearrange the order of the columns, highlight 
your chosen column and use the up and down 
arrows to customise the columns displayed. 


8 an admin page and thoudd not be edked 


There are two tabs available in each Note. In 
The Basic Info tab, you can set the status of 
the file and add your comments. The Date icon will 
auto-insert the date and you can determine whether 
your Notes should open when the file does by 
checking the option at the bottom of the window. 


1KB MNO File 
KB LOK File 
1KB XML Document 


6/3/01 10:05 PM 
6/3/01 3.02 PM 
6/3/01 10:00 PM 


This file is actually created as an XML file. 
9 | You'll also notice other files being stored here 
such as the one which holds your Site Column's 
preferences. These are invisible when viewed in 


Dreamweaver so they don't distract you from actual 
content pages. 


For more information on Dreamweaver's Notes 
12 ; aes 
feature or indeed any of Dreamweaver's site 
management tools, check out the extensive help 
files and keep an eye on what's happening on 
Macromedia's Dreamweaver pages. 
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How to make a database driven graphics 
catalogue, with the help of Dreamweaver 
UltraDev 4 and supporting Extensions 


any good software apps 
these days support 
Extensions or plug-ins as 
they are also called. By 
providing a developer’s API (Application 
Programmer's Interface), the software 
houses can expand their product ina 
seemingly infinite way. 

The expense of doing this is easily 
offset by avoiding introducing ‘niche’ 
features that only a few will use. And 
because there are more companies 
determining product development than 
just the software house, there's more of a 
‘community’ spirit surrounding the 
application. Both Adobe Photoshop and 


QuarkXPress have been enhanced this 
way. Each has a large numbers of 
Extensions servicing a vast range of 
general and specialist requirements. 
Macromedia decided early on that its 
Dreamweaver product required this level 
of expandability and since version 1.0, 
many Extensions have been created to 
work with either Dreamweaver or 
UltraDev Dreamweaver. 

In this tutorial, we explore a number of 
Extensions and show how they integrate 
with UltraDevto make a graphics 
catalogue. At a basic level this should 
give you an insight as to how these might 
enhance your Web pages. 


Illustration: Kevin Davison [e] KvnJed@aol.com [t] 01908 320072 


Part 1: Ground work 


Before we make our graphics catalogue, we need to do some basic ground work. This includes loading our 
Extensions for use and configuring the site for U/traDev 


| want some 
Extensions! 


So where do | go to get 
Extensions? The best place is the 
home of UltraDev, the 
Macromedia site. The site has 
three specific centres for 
Extensions, one for Dreamweaver 
and others for UltraDev and Flash 
5. Those both for Dreamweaver 
and UltraDevwill work with 
UltraDev, and there are 
hundreds. They are helpfully 
organised by subject and quality, 
so you can find exactly what 

you need. 


myo page ard i wl check to weet yous pager nseneone ches Ramwoet ard buat 


If you want to use Extensions, you need the 

Extensions Manager. If you don't have this, 
then you need to download it from the Macromedia 
Website ([w] www.macromedia.com). Your 
Extensions won't work if U/traDev is already 
running, so install them before launching. 


4 | By using Photoshop here, all the images are 
loaded and thumbnail versions made. The 
‘thumbs’ are saved elsewhere under the same 
name, and the field in the database stores that 
name. This is required for Flash files whose thumbs 
are still JPG images. 


| 


First we need to define the site inside UltraDev Once the site and ODBC link has been made, 


and create a supporting database. We used we need some table structures for data to live 
MS Access 2000, but any decent database that can in MS Access. Our catalogue needs a table in which 
be manipulated with ODBC (Open database we can record all the data relating to the images. 
connectivity) will work. Here we can store the name, description and so on. 


Still in the Site Manager, we need to create two 


5 | Using the Site Manager, folders are created for pages: for listing the images, and for displaying 
storing the images and thumbs, this might full-size images. Opening the list page, create a 
seem excessively organised but it's good practise. query to return the Recordset we need for the 

The folders are filled with the files in the catalogue album, with fields ‘pix’ and ‘thumbs' being 

and the database with corresponding records. calculated to add the folder paths to file names. 


Part 2: Making a graphics selector 


A simple list page needs constructing so that we can choose which images we require. We can spice this 
up alittle by using a few Extensions... 


& Create a table, drop an image in it and link 
that to the thumbs field, so it displays the 
thumb image. After adding a ‘repeat’ section to 
show more than one thumbnail, we are ready to 
use our first Extension. 


This is the Extension ‘Page List’ by Thomas The end result of ‘Page List’ with a star defined 
Muck. It's part of a package called The as the delimiter. Any text character can be 
Recordset Navigation Suite. This gives us a nice set used, or you can select a graphic for this purpose. It 
of page links and avoids the ‘next/previous' stuff only requires a ‘repeated section’ behaviour on the 

that everyone does. page to work. > 
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Extensions — handle 
with care... 


Some Extensions only work 
under certain conditions or with 
specific browsers. Or they 
specifically require ASP JSP or 
Coldfusion. Before you spend 
lots of time using a particular 
Extension, make sure it works in 
the environment that your site 
will inhabit. This unfortunately 
makes many unsuitable for 
widespread Internet use. 
Alternatively, if you have an 
Intranet and all your users have 
1E5.5, then some Extensions do 
spectacular things. 


4 | After adding a few more fields, the list page is 
almost complete. It's been set to display just 
three images on a page with the description, title 
and publication it was created for. Once the layout 
is complete, the borders will be set to 0 to make all 
the boxes disappear. 


When finished, the thumbnail becomes 

sensitive to the pointer and launches a 
‘Chromeless' window when the pointer goes over it. 
This is pointed at the second page, which currently 
displays nothing. We'll fix that shortly. 


5 | The thumbnail graphic is also going to be a link 
to a viewer page. We could add this as a 
straight hyperlink, but an Extension called 
‘ChromeLessWin’ will provide a much more 
impressive viewer page than a normal window. 


8 | For this to do more, we need the viewer page 
to contain some code. But first we need to 
address file types. In this demo, we have both JPG 
and SWF (files) - we need to have a viewer for each 
and to call the correct one. 


<5 een ay eter Saeed. Atak, owe, meet ote—isene(mcnednee) 
See Seer nem) tm eae 


G The ‘ChromelessWin' Control panel can't 
handle dynamic references, so these must be 
crafted by hand. By doing this we can dynamically 
set the x/y size, title and even border colour. This 
can be tricky because some items are text and 
others numbers. 


i918. Tawi "Psctacntiame™) Yale W></b></fower</te> 
as 


Teem(*T") values a>, 
ret i, ‘anccee: | 
5 "2! 8000000") "><img see=* 
= (Recordset .Feide. Ieem{*Toumb*) Value) \>* bordar="0"><Ja></aiv> 
a 
<td valign~"top"> <font tace~Verdenn, Arial, Relvetice, saxe-serit™ sise-"i7><¥= 
Jpecordeet 1. ieide, Tem ("Dewcr sption™) Value) $></tont></ta> 


<8 whdtne"EOO™ Retghe=*E><faut color="#000000"> cubmp: </tone></ea> 
cea Rezgucena"> 
any aLageerrigme></aaye 


9 | This is done by naming each viewer after the 
file type, for example, SWF and JPG. Then the 
hyperlink part of the ‘ChromelessWin’ code is 
altered to make the URL it calls dynamic, based ona 
filetype field from the database. When it’s a JPG, it 
calls the JPG.ASP and so on. 


pg es 
Part 3: Making a Full Quality viewer 


Having all the images listed here is nice, but we want to present them at Full Quality 


Where is my 
Extension? 


When you install an Extension, it 
can appear in any number of 
places, which can make them 
hard to find. When you install a 
new one, make a note of the Type 
in the Extension Manager. 
Commands appear under the 
Command menu, objects under 
the Insert menu, and behaviours 
ina few places. Check the 
accompanying notes if you still 
can't find where it operates from. 
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<td> 
<div align="right"><font face="Verdana, Arial, He. 
feces"Arial, Helvetica, sans-serif” size="2"><b><%= (Recordset: 
b></font></b></font></div> 
see 
ste 
<tr bordercolor="#000000"> 
<td width="200"> 
<div align="center"><a href="javascript::" of 


\. ‘Chrome’ , <¢= (Recordset 1. Fields. Item(*x*) Value) t>, <¥=( ord 


wail, null, *<t=(Recordset1.Fields. Item(*PictureName") .Value) +> 

‘#O066CC’ ,true,'Arial, Helvetica, sans-serif’ + ‘2*,' #000000" 

‘= (Recordset 1. Fields. Item("Thumb”) .Value)2>" border="0"></; 
</ta> 


<td valign="top"><font face="Verdana, Arial, Helvet: 
"(Recordset 1. Fields. Item("Description") . Value) %></font></td> 

</tr> 
<tr bgcolor="SFFFFFF" bordercolor="#000000"> 

<td width="200" height="2"><font color="#000000"> 

<td height="2"> 

<div align="right"></div> 
</td> 


a The ASP page for displaying the image is 
designed with the same Recordset query as the 
list page with a number of exceptions. Firstly the 
query needs cutting down so that it returns just 
three fields: ItemNo, PictureName and Pix, the 
folder modified version. 


") «Walue) %></b></font></ta> 


<div align="right"><font face="Verdana, Arial, 
ce-"Arial, Helvetica, sans-serif” sice="2"><b><a= (Recor: 
b></font></b></font></div> 
</td> 
</tr> 
<tr bordercolor="#000000"> 
<td width="200"> 
<div align="center”><a href="javascript:;" o 
= (Recordset1. Fields. Item("FileType”) - Value) *>.asp? 


‘Chrome’ , <t=(Recordseti.Fieids. Item("X") Value) %>, <4" (Req 
1,null,'<%=(Recordset!. Fields. Ttem("PictureName") .Val 
WOOS6CC’ ,crue,'Ariel, Helvetica, sans-serif’, ‘2', ‘#0000 
w= (Recordset i. Fields. Item("Thumb") . Value) +>" border="0">4 

</ta@> 
<td valign="top"><font face="Verdana, Arial, He: 
Recordset 1. Fields. Item("Description”) -Value) $></font></td 
</tr> 
Str bgcolor="#FFFFFF" bordercolor="#000000"> 
<td width="200" height="2"><font color="#000000' 
<td height="2"> 


It also needs a mechanism for selecting just 
one image/graphic. To do this, we need to 
Pass a parameter from the list page to the viewer 
page. In this case it's the ‘primary key’ field — 
ItemNo, which uniquely identifies the file we want. 


The viewing page is very straightforward. It 
has a single image object that is dynamically 

selected by the query sent by the ItemNo. This 

could also be done with pure parameter passing. 


Part 3: Making a Full Quality viewer continued... 


v 
¥ 
v 
v 
cd 
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Because we've used some Flash in the 
interface and catalogue, we need links to 
download these plug-ins. ‘Plugged-In’ adds links for 
Shockwave, Flash, QuickTime, Liquid Player or 
Real. We only need to add Flash for this project. 


The SWF viewer. You can call this any size you 

like, because Flash rescales. You could either 
put a specific size in the ASP page or do it on values 
stored in the database per file. 


Because the viewing page is designed to fit the 

image, it doesn't require a border. An extension 
called ‘Zero Page Borders’ does this for us — it's not 
exactly ‘rocket science’, but it saves a little time. 


Part 4: Finishing touches 


Now we have our basic functionality, it’s time to make the site more ‘visually 
distinctive’. A number of useful Extensions come to our aid here 


Extensions used in 
this project 


Bust Frames'1.0 by Andrew 
Wooldridge 

ChromelessWin 2.1.3 by Public 
Domain Ltd 

Text TO SWF 1.0 by Tomohiro 
Ueki 

Zero Page Borders by Andrew 
Wooldridge 

Additional Flash Button Styles 
1.0 by Macromedia 

Recordset Navigation Suite 2.0.1 
by Thomas Muck 

Plugged-in 1.0.1 by Brendan 
Dawes 


The buttons recursively call the page they are 

on with a parameter to control ‘FType' — this is 
picked up by the ‘Request.QueryString’ and passed 
on to the database query that is modified 
accordingly. Setting ‘FType' to ‘%' by default 
displays all file types. 


fv Flash buttons are a standard feature of 
UltraDev 4. But one Extension adds a range of 
new ones, which are generally attractive. The ones 
used here were designed for an e-commerce 
application, but they will serve for our purposes. 


mo 
Bh ecicieo mage tindowc/tscie> 


at Ft ee cael eee 


From the Text to SWF control, you can select i — - 
font, size and colour for the Flash it generates. 5 | This final Extension has no visible effect unless 


After it is produced, the output is is automatically 
linked back to the page replacing the text. If this 
was ever expanded to make drop shadows it would 
become invaluable. 


you are designing for a site that is hosted by an 
operator who annoyingly adds his own banners. 
The ‘Bust Frames’ does just what it says on the tin, 
and busts a page out of a framed banner. 


3 | A Flash logo always looks better than plain 
text. Luckily, we can make one from the other. 
The text is placed on the page and highlighted, then 
Text To SWF is selected from the Commands menu. 


G The finished site. A total of three pages, one 
small Access Database and a few Flash files 
make a complete graphics catalogue. If we wanted 
to extend it, we could add a text search page and 
even include the full animation with AVI and 
QuickTime capability. 
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[Dreamweaver] 


Dreamweaver might be the most comprehensive Web design tool in the business, but it can’t 
do everything that the modern creative demands. Luckily, Extensions exist to give the 
package a much needed boost. You'll find most of these Extensions at the Macromedia 


Exchange for Dreamweaver: a truly bursting resource 
(and more than 430 extensions). We've rounded u 


and you'll find some of them on your cover CD. 


Add Favourite 


[w] http://home.att.net/%7EJCB.BEI/ 
Dreamweaver/behaviours.htm 

A sneaky behaviour this, but extremely good for 
reminding visitors who you are and where your site 
is. Simply download the action and drop it into 
Dreamweaver/Configuration/Actions and, hey 
presto! you have a behaviour that automatically 
adds your page to your visitors’ Favourites list 

(as long as they use Internet Explorer). 
Excruciatingly annoying for most, but if you feel that 
you really need to promote your site this way, then 
pick it up. 


Banner Image Builder Extension 


[w] www.macromedia.com/exchange/dreamweaver 
Sometimes the simplest ideas are the best but 
sometimes the simplest effects are the hardest to 
create. Luckily, there’s usually someone on the 
Web who has the answer to your design or coding 
problems. This nifty little Extension creates a 
sequence of images that change at specified 
intervals. Each image can have its own link too, 
making it a great way of cramming as many 
different images and links as possible into a single 
banner space. 


Web Kitchen Tools 


ae ae a 


The Web KitchenExtension is available as a 30 day download or 


pick it up for $89 from [w] www.matterform.com. 
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Check Form 


[w] www.yaromat.com/dw/index.php 

This form validation behaviour from Yaromat’s archive 
of Dreamweaver Extensions claims to “make much 
more than the native DW behaviour.” The last thing you 
need when sifting through visitors’ information is for 
vital snippets to be missing. Well, this Extension 
makes things easy. You can validate radio buttons and 
checkboxes, as well as lists and other input fields. But 
the standout feature is the fact that you can define 
custom error messages. 


ChromelessWin Extension 


[w] www.macromedia.com/exchange/dreamweaver 
The standard browser interface: we see it day in, day 
out and sometimes it gets to be a little dull. If you want 
to spice up your designs for your visitors, the 
Chromeless Window Extension may be just the ticket. 
Basically, it creates a draggable chromeless window 
(without the grey borders) that looks completely 
different from the standard Browser Window (in IE5 


There are eight ‘Select one from the following diopdown list 


of WA Basic Charts available. 
setae hah Chas einen ae no eke Woe 


Flash Charts enables you to create 12 different types of 
Flash-based charts from directly within Dreamweaver. 


, full to the brim with top-quality extras 
p some of the best for you, mostly free, 


only). Users can set the standard and selected border 
colours for the window, the window width and height, 
the opening position and more. 


Clean Up FrontPage HTML Extension 


[w] www.macromedia.com/exchange/dreamweaver 
Picture the scene: you're ona tight deadline, your boss 
is breathing down your neck, and you're expecting that 
all-important HTML page from a client who insists that 
you adapt the supplied page. When it finally arrives, 
it's been created in Microsoft FrontPage. This isn't your 
tool of choice (Dreamweaveris, of course) and you 
want to get rid of all the FrontPage proprietary tags. Do 
you go through it by hand and risk a roasting from your 
boss or download this FrontPage-cleaning extension 
and leave it in the capable hands of Macromedia? 
Hmmmm. 


DHTML Scrollable Area Extension 


[w] www.macromedia.com/exchange/ dreamweaver 
Injecting that little extra something into your site can 
be a mind-draining, creativity-sapping process. 
Whether it be that little bit of navigation that sets 
visitors’ pulses racing or simply a slick piece of Flash 
content. Well, this Extension adds touch of class to 
your designs. It’llenable you to insert a scrolling layer 
in which the content can be moved up and down using 
inserted links: not at all flashy really, but something 
that could give your site a boost. See 

[w] www.z3roadster.net for more details. 


Fade Text 


[w] http://home.att.net/%7EJCB.BEI/ 
Dreamweaver/ 

Fora long time now, fading a part of the screen as 

a transition has been an extremely tricky process. 
Well thanks to Kevin Bartz at The Dreamweaver 
Supply Bin (see Web guide, page 92), the process is 
little more than a formality. This script gradually 
changes the colour of text, so that you can fade, make 


bold, or apply virtually any kind of coloured text effect. 
Not bad at all. 


JavaScript Integration Kit for 
Macromedia Flash 5 Extension 


[w] www.macromedia.com/exchange/dreamweaver 
Now this is what all free Extensions should be made of. 
This little beauty comes straight from Macromedia and 
is absolutely essential for anyone using Dreamweaver 
and Flash. Ina nutshell, it adds VCR-like controls to 
Macromedia Flash animations, contains advanced 
client-side form validations, enables users to 
implement Flash Player detection to their site and tons 
more. Certainly one of the most productive, versatile 
Dreamweaver Extensions ever. 


Layer Wipes 


[w] http://home.att.net/%7EJC B.BEI/Dreamweaver 
You might want to take a look at one of these nifty 
transitional Layer wipes. This sort of effect used to be a 
major coding nightmare, but now you can quickly and 
easily apply many effects to a layer (things like Wipe 
right, Wipe left, Wipe down, Wipe up, Box in and Box 
out), using the relevant behaviour. Even better, all these 
add-ons work in IE and Netscape. To find them, pop 
along to The Dreamweaver Supply Bin. 


Nokia WML Studio Extension 


[w] www.macromedia.com/exchange/ dreamweaver 
This crafty extension from the communications 

giant Nokia, transforms Dreamweaverinto a 
full-blown WAP-making machine. When launched 
from within Dreamweaver, the Extension provides a 
WYSIWYG development environment for WML. It’s 
extremely comprehensive, including a WML1.1 parser 
with visual error feedback, and a rather swanky 
preview function that emulates a Nokia WAP phone 
within your browser. 


Random Images 


[w] www.macromedia.com/exchange/dreamweaver 
This Extension enables you to create a page which 
delivers a randomly generated image every time 
you visit, or click Reload. Its basic premise is that 


The Nokia WML Studio Extension transforms Dreamweaver 
into a full-blown WAP-making machine. 


This invaluable Extension from Resolution Redirect redirects 
visitors to different pages depending on their screen resolution. 


it's a tool for generating random images from a 

given set. It's certainly not brain surgery, but 
nevertheless a good solution if you need to showcase 
your work, but don't have the time or the patience to 
create a comprehensive gallery. Check out 

[w] www.kaosweaver.com for more. 


Replicator 


[w] www.macromedia.com/exchange/ dreamweaver 
A productivity-enhancing command from the home of 
Dreamweaver, this time intended for the exact 
replication of any single object. An excellent 
time-saving device, especially useful for replicating 
repeatedly-used icons or buttons. There's not much 
else you can say about this, apart from the fact that it 
doesn't work on multiple objects. Pretty handy though, 
and remember, it's free. 


Resolution Redirect 


[w] www.massimocorner.com/ 

If you've ever designed a site specifically for 

viewers with a screen resolution of 1024x768, only to 
find out that everyone is still viewing it at 800x600, 
then this Extension will be invaluable. Coming from 
Massimo's Corner of the Web (see Web guide, page 
92), this handy add-on redirects visitors to different 


Using Add Favourite may annoy potential visitors rather than 
intrigue them, but either way your site is bound to get noticed. 
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Essentially a form validation behaviour, Check Form validates 
radio buttons and check boxes. 


pages depending on their screen resolution. A good 
Extension for ensuring that visitors see your page as it 
should be seen. 


Scrolling link list 


[w] home.att.net/%7EJCB.BEI/Dreamweaver/ 
objects.htm 

Is your link page less well-designed than your other 
pages because of lack of space? Or do you like 
cramming vast amounts of info into a small space? 
Well, worry no longer, because this superb behaviour 
from the Dreamweaver Supply Bin should solve the 
problem. It automatically inserts a list of links (all of 
which are easily editable to include your own links) 
within a small space. Only a few of the links are visible 
at any one time, but by hovering your mouse above or 
below the list, it scrolls to reveal all. 


WA Flash Charts 


[w] www.macromedia.com/exchange/ dreamweaver 
Version 4 of Dreamweaver added some great new 
Flash-based tools to the application, namely Flash Text 
and Button tools. The guys over at WebAssit.com have 
obviously picked up on this idea and have 
subsequently come up with a great Flash-based 
Extension of their own. Flash Charts does exactly what 
it says on the tin: enables you to create Flash-based 
charts directly from within Dreamweaver. twelve types 
of charts can be created, ranging from bar to pie: the 
only downer is the asking price of $19.99. There is 
however, a free version enabling you to create bar 
charts only. See [w] www.webassist.com for more. 


Web Kitchen 


[w] www.macromedia.com/exchange/dreamweaver 
We could pull a few culinary/design puns out the bag 
here, but we won't bother because it would detract 
from the sheer excellence of this commercial 
Dreamweaver Extension. Included are no less than 17 
professional objects, commands and inspectors all 
aimed at making your Web designing and coding life 
easier. These include text tweaking tools, custom find 
and replace tools and more. The Extension is available 
as a 30 day download, but if you're feeling rich, pick it 
up for $89 from [w] www.matterform.com. Ea 
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BRITAIN TATE BRITAIN TATE BRITAIN 


Nykri 
“Even since the first version it has been the most user-friendly 


and by far the best tool for the job,” Jason Fawcett, Interactive 
Designer, extols the virtues of Dreamweaver... 
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TATE ST IVES 


our years young with a dazzling and varied 
list of clients, Nykris Digital Design has 
I j much to be proud of. With an already 

el extensive range of experience in both the 
creative and the technical, there's not much the team 
hasn't tried. Web design, streaming media, WAP 
database systems, e-commerce and content 
management are all part of the package. 

Last year, Nykris picked up four BIMA awards (British 
Interactive Multimedia Association) for its work, 
including the CD-ROM for the BBC’s children’s TV show, 
the Tweenies, and specialist e-commerce Website, Bird 


TATE ST 


“IVES 


ST IVES 


TATE ST IVES 


TATE ST IVES 


Guides at [w] www.birdguides.com. Other clients include 
Microsoft, BBC Online, the Tate Gallery, ONdigital and 
DCMS (Department of Culture, Media and Sport). 
Microsoft chose Nykris to design the new Mac 
interface for Internet Explorer 5 and the DCMS wanted 
a searchable online exhibition of the Government's 
own art collection. As well as these successes, the 
stunning Website it designed for the Tate was launched 


last year to coincide with the gallery's change of image. 


Nykris also attracted attention in April 2000 with 
the launch of its unusual WAP site — Instant Relief 
wap.instantrelief.org — dedicated to helping users find 


TATE MODERN 


a loo in the centre of London by providing maps and 
tips. It also designed the new interactive TV channel on 
NTL for [w] webweekends.co.uk, a travel service for 
city breaks, late deals and stag or hen weekends. 


One tool for the job 


But despite new platforms and technologies arriving 
each year, most clients are still looking to create, 
develop and manage its Web presence. Nykris 
consistently choose Dreamweaver as a principal tool 
for designing and building these creations. 


E MODERN 


The agency is currently working on a major new site for 
the Bartlett Faculty of the Built Environment at 
University College London. Dreamweaver has played a 
pivotal role in the design and development of this 
striking site. 

Jason Fawcett, Interactive Designer, explains its 
approach to the task. “Dreamweaver was used 
extensively in the Bartlett project to create the 
‘kit-of-parts’ the client will need to maintain and 
update the site. Our brief was to make a Website for 
them that would allow them to be self-sufficient in 
publishing and growing the site themselves.” > 
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TATE MODERN’ TATE MODE 


The Tate 


[w] www.tate.org.uk 
Last year Nykris was approached by the Tate to create a new Website to accompany the launch of the gallery's new brand 
identity. This new online presence was to reflect the popular openings of the Tate Modern and Tate Britain galleries. 

Taking the Tate's wealth of content and presenting it ina striking but user-friendly way was a huge challenge for Nykris. It 


eventually succeeded in creating an incredible site with superb imagery and intuitive navigation. Now, with a New Media 


Age award for Best Use of Web, the site allows users access to over 25,000 works of art online. 
Tate.org.uk now receives 750,000 hits per day and a survey commissioned by the Tate showed that 47 per cent of visitors 
to the Website said they were more likely to visit the galleries as a result of their visit to the Website. 


1. From entertainment and culture The Bartlett 

to education, Nykris has designed i ti 

the dynamic new site for the 

Bartlett Faculty of the Built The Bartlett Faculty lorem ipsum dolor st amet. The Bartiett 


fara baembree cavlateect Thakomes tree men 
Environment, soon to be found at Samet Ins Doms Fesomybnmons tontseamet 


[w] www.bartlett.ucl.ac.uk. 


2. Nykris’ own WAP project, Instant 
Relief, was a humorous but useful 
service for helping those in London 
find a public toilet. Point a phone at 
wap.instantrelief.org. 


3. When Microsoft wanted a new 
interface for Internet Explorer 5 for 
the Mac, it came to Nykris. Steve 
Jobs, Apple's CEO, called it ‘the best 
browser on the platform’, and it 
generated over one million 
downloads in its first 14 days of 
availability. Check out [w] www. 
microsoft.com/mac/products/ie, 


4. Moving webweekends.co.uk from 
acomputer to a TV screen and 
creating an efficient and visually 
appealing service required design 
and technical expertise in both 
media. [w] www.webweekends.com. 


5. Nykris has also recently produced 
the ‘Government Art Collection’ 

for the DCMS; a Website which 
enables users to browse and search 
4,000 works of art owned by the 
British Government. Take a look at 
[w] www.gac.culture.gov.uk. 
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Creating a Website that will ultimately be handled 
solely by the client brings new issues into 
consideration. “We had to bear in mind that the site is 
likely to be maintained by a number of Web Editors with 
different levels of experience. By creating templates 
and objects, the Web Manager has greater control over 
what can be edited. Less experienced editors can be 
confined to editable areas of the templates.” 

To achieve this, the design team wrote specific 
Dreamweaver extensions to generate the menus for 
the site automatically (see the walkthrough on page 
91). The template functions were extremely useful for 
facilitating site maintenance and updates. “We made 
use of Dreamweaver objects,” explains Jason, “which 
are essentially pre-formatted HTML tables that can 
be dragged and dropped into the template pages. The 
cascading style sheets also gave us much greater 
control over text formatting such as headers, body 
text, captions and anchors. They can all be pre-set and 
applied in Dreamweaver so users don't have to format 
each page separately.” 

Nick Ager, Technical Director, is also impressed by 
the flexibility of the software. “We have customised 
Dreamweaver in a number of ways. The most simple is 
to define templates for the site to ensure a consistent 
look and feel. They enable us make changes in one 
place and for the changes to be propagated throughout 
the site. We also create customised and bespoke 
behaviours and objects that can help provide 
consistency, and dramatically improve productivity 
across a site.” 


Consolidation 


After its considerable experience with the software, 
the design teams are well versed in consolidating the 
qualities of Dreamweaver with other programs. “The 
initial designs are primarily produced in Photoshop, 
the graphics processed in ImageReady, and then into 
Dreamweaver for constructing and laying out pages in 
HTML,” says Jason. “Also, the support for previewing 
Flash, behaviours and the animation/timeline support 
make Dreamweaver one of the better packages. 
However, providing rich multimedia support is limited 
by the capabilities of the browsers and cross-browser 
compatibility issues. Straight Flash is a much better 
bet for most Web multimedia projects.” 

Colleague Paul Sheffield, also an Interactive 
Designer added, “Dreamweaver is fantastic when you 
want to insert plug-ins to your Web page: writing the 
code you need is normally lengthy and time 
consuming, but Dreamweaver does it ina second. And 
with the Objects panel you can easily add custom 
plug-ins like QuickTime.” 

But whatever tools Nykris uses, like other new 
media agencies, it’s still battling with the Web, a 
complicated medium. “There are obviously 
limitations,” says Jason. “Web designers have to be 
particularly inventive to get round the limitations, 
whether it be bandwidth or flaky browsers. Designing 
for the Web is very much a problem solving activity — 
organising, customising and simplifying the process. | 
like to think that first and foremost we make sites that 
actually work — it’s very often all in the details.” FEES 


) Weekend bag 


information Role oftheGAC The Collection 


Introduction to the GAC 

fi The Government Art Collection is a unique British cultural resource 
Works of art from the Collection are displayed in British Government 
buildings both in the Linited Kingdom and around the world, playing a 
significant role in promoting British art and culture across diverse 
and international environments Over 4000 works - about a third of 
the Collection - are now listed on this site. 


bone Wensite > TOR > 


ad el F The Dreamweaver API supports XML 

——— — 4 - 2: which makes it straightforward to read 
o The Bartlett site has been designed to EE nn “3 the menu definition and create a Menu 

incorporate an expanding menu, e Generating the HTML for all the The menu structure is described in Generator, UI. The UI is used to specify 

enabling the user to navigate to different different combinations of such a menu XML. Nykris finds that XML is ideally where in the menu structure a particular 
parts of the site. It also serves to ‘signpost! by hand would have been an extremely suited to menu specification because it is page is found. The Menu Generator then 
the user wherever they are on the site. The time-consuming, dull and potentially hierarchical and conceptually creates the HTML specific to that page, 
structure of the site has an extensive menu error-ridden task. Instead Nykris created a straightforward to map from XML to the resulting in subtly different HTML across a 
consisting of nine sections, each of whichis bespoke Dreamweaver object; the Nykris menu itself. The custom code in great number of pages. The client also 
three levels deep. Menu Generator. Dreamweaver then reads the XML file. appreciates the amount of time saved. 
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[Dreamweaver and UltraDev] 


The Web is not the easiest medium in the world to conquer. Luckily, those in the know 
have had the good sense to share their knowledge on the Web itself — and we're here to 


point you in the right direction 


Bellsnwhistles.com 


[w] www.bellsnwhistles.com 

Building your Website can demand a great deal of 
resources, such as graphics, applets, programming 
help, music files, construction tools and heaps more. 
This site is the definitive starting point, with literally 
hundreds of files for you to download and use 
absolutely free of charge. 


Computer Arts 


[w] www.computerarts.co.uk 

Well, if it isn't Computer Arts, Britain's best-selling 
magazine for creatives, and parent of Computer Arts 
Specials. This is Computer Arts online: a stonking 
collection of news, tutorials, tips, galleries, forums and 
more. Catch up on the news at it happens, find the best 
tutorials, discuss the issues that matter at our new 
forum and find answers to your technical queries. 


Computer Arts Forum 


[w] www.computerarts.co.uk/forum 

Picture the scene — one piece of JavaScript has you 
baffled, or perhaps Dreamweaver isn't behaving quite 
as you expect it to. What do you do? Well you could 
spend hours sifting through manuals and reference 
guides, or you could visit the all-new Computer Arts 
Forum. One of the team or some vigilant Web designer 
is more than likely to be able to help. 


October 1-3 


wer} FG) Con 


92/06/2001 - & new Server Behavior for Ultradev and ColdFusion: Redirect 1 


< Teo new Server Behaviors for Ultradey and ColdFusion: OF 
(21405/2001. 

26/05/2001 ~ A brani nev Server Behavior for PHP by Kenny ond 

Updated PHP thclude thet now works on the latest releases of PHPALL ax wall 


Massimo's Corner boasts a healthy number of useful add-ons 
for Dreamweaver and UltraDev. 
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DHTML Zone 


[w] www.dhtmizone.com/index.html 

Dynamic HTML is seen by many as just being a way of 
flinging animations around the screen, when it’s 
actually a much broader set of disciplines, 
incorporating JavaScript and other advanced 
techniques. The DHTML Zone is a scholarly collection 
of articles and tutorials, covering just about everything 
you need to know about DHTML. A fair bit of 
knowledge is assumed, however. 


Dreamweaver Depot 


[w] http://weblogs.userland.com/dreamweaver/ 

The Dreamweaver Depot is a wonderful place to pick 
up tips, objects, behaviours, commands and virtually 
anything else Dreamweaver-orientated. There's tons of 
tutorials, a discussion board, and links to other 
worthwhile sites. It’s just a shame it’s not updated 

more often. 


DreamweaverSites.com 


[w] www.dreamweaversites.com 

A healthy amount of tutorials, design advice, templates 
and extensions can be found at the linked sites that are 
scattered around DreamweaverSites.com. All are of 
high-quality and the site ultimately lives up to its 
promise as: “a place to learn and improve your Web 
design skills.” 


Dreamweaver Supply Bin 


[w] http://home.att.net/~JCB.BEI/Dreamweaver 
This is one of the Net's handiest little stores of 
pre-made stuff for Dreamweaver. Unfortunately the 
rest of the pages are garish to say the least, but the 
content kicks. There's a broad selection of objects and 
behaviours here, succinctly but jauntily described for 
quick browsing. 


FreewareJava.com 


[w] www.freewarejava.com 

You can really add some excitement to your Website 
using Java applets, and this is certainly a great place to 
start your search. It contains 670 downloads, not to 
mention links to Java e-zines, 23 tutorials, jobs and 
more besides. It’s also a very clean, functional site to 
find your way around. 


Macromedia Exchange for Dreamweaver 


[w] www.macromedia.com/exchange/dreamweaver/ 
From the home of Dreamweaver comes a truly 
amazing resource full of Extensions and add-ons 

for the package. As it stands, the Macromedia 
Exchange for Dreamweaver is almost certainly one of 
the best resources for Extensions and add-ons 
currently on the Web. If you have written one, 

submit it and make the site an even more 

fantastic resource. 


The Webmonkey provides a remarkable amount of tutorials and 
general advice on the tricky world of Web development. 


You'll find tons of tutorials, a discussion board, and links to 
other worthwhile sites at Dreamweaver Depot 


html 


Sswozjam 


DHTML Zone is a scholarly collection of articles and tutorials, 
covering just about everything you need to know about DHTML. 


Massimo’s Corner 


[w] www.massimocorner.com 

Massimo’s corner of the Web may not look that 
spectacular, but it boasts a healthy number of useful 
add-ons for Dreamweaver and UltraDev. Commands, 
objects, inspectors and behaviours are all covered, 
along with tips and tricks — from inserting a 
Shockwave Director file into Dreamweaver, to 
server behaviours. It’s not a site for beginners 
though, it’s assumed you pretty much know what 
you're doing and why. 


Optimising Web Graphics 

[w] http://webreference.com/dev/graphics 

With so much dross on the Web, it’s critical that your 
site loads before people lose interest and go 
elsewhere. The best way to do that is to optimise your 
images so that they're as compact as possible. 

This superb site is a comprehensive guide to 

the process. 


SiteBuilder 


[w] www.sitebuilder.ws/design/dreamweaver.htm 
Atruly bursting resource, SiteBuilder is a place on the 
Web that any budding or established Web designer 
should look at at least once. It’s full of tips, tutorials 
and links: there’s even a search facility to help you 
find exactly the tutorial you're after, be it databases 

or DHTML. 


Fats 


30 effects add 2 whale new dimension te animated design + in a 
creative sense a2 well as liberally. But there's no need to get dogged 
down in complex 30 software. Instead, you can use traditional 20 
Perspective techniques in your intaractive animation, 


If you've got a problem, one of the team at Computer Arts Forum 
or some vigilant Web designer is likely to be able to help. 


SiteBuilder 


Dreamweaver Tutonals : 
Dreamweaver Links Request a specific 
Dreamweaver, UltraDev 


or Fireworks Tutorial 


Dreamweaver Viewlets 
(Animated Tutorials) 


o Resizing (he Document 


A truly bursting resource, SiteBuilder is a place that any 
budding or established Web designer should visit at least once. 


SNR Graphics 


[w] http://dreamweaver.snrgraphics.com/ 
tutorials.php 

Another site bulging with Dreamweaver goodness, 

SNR Graphics’ resource has enough content to keep 
the avid Web designer impressed and entertained fora 
long time. Extensions, behaviours, scripts, and much 
more await - it’s all very friendly in its design too. Of 
particular interest is the Image Protect script which 
stops visitors pilfering images from your site. 


The Dreamweaver Bible 


[w] www.idest.com/dreamweaver 

Basically a plug for Joseph Lowery’s book, but what a 
book. This is the indispensable guide for any level of 
DWuser, versions 2, 3 or 4. The site doesn't contain an 
awful lot, offering links to buy the book (with a special 
offer if you buy it directly through Joseph) and a 
comprehensive contents list; but it does have a link to 
the DW Extensions Database and a newsletter. 


The Ultimate Counter 


[w] www.ultimatecounter.com 

So you want to add a hit counter to your site to see how 
many visitors you get? This is the place where you'll 
find what must surely be the Web's most popular 
counter service, with over 400 million counters in 
operation! You can use the basic service for free, anda 
small upgrade fee gives you more advanced options. 


This page was intended to be more of @ Dreamweaver Tutorials paga. 
but instead, we have decided to give additional instructions for some of 
our objects 


Current Tutoriais/Use instructions — Available by SnR' Graphics: 


+ Add to iE Favorites - behavior 

+ BFormMail CG! Mader - object 
+ Crescendo Set - object 

+ Gult 30 Set - object 

+ Dynamic Clock - object/behavior 
+ image Protect - object 

+ NNTP Link - object 

+ Page Protect - object 

+ PHP Set | - object(s) 

+ Random Audio Piayer - object 
+ Select Al Button - obje 

« Servet Side includes (S89 - object(s) 
+ TrueDoc Dynamic Fonts - object 


I you are in a pinch, and you are not already 2 subscriber, check out 
the Macromedia Drearnweaver news group. macromedia. dreamweaver 


[Add to E Favorites. What is it? well t's simply a link which, when 


clicked by a page viewer (visitor) 
to Favorites” panel. The s: 

URL to be added, the Titi 
message for those who cl 

web browser 


inches MS intemet Explorers "Add 
jows you to specify things like, the 
URL being added, and an Alert/Error 
fink, but are not using 2 compatible 


SNR Graphics’ resource has enough content to keep avid Web 
designers impressed and entertained for a long time. 


~ CHAPTER LINKS- 
| 
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TABLE OF CONTENTS 


One of the more engaging Dreamweaver-orientated sites on the 
Web, Training Tools is a fantastic resource for tutorials. 


Training Tools 


[w] www.trainingtools.com/online/dreamweaver4/ 
index.htm 

There are some awesome places on the Web that 
remain undiscovered until one day an intrepid 

design nut finds them and tells the world. Training 
Tools.com is such a site. With an amazing amount of 
intelligent tutorials, all extremely well-written, this is 
one of the more engaging Dreamweaver-orientated 
sites on the Web. 


Web Building 


[w] www. help.com/cat/4/index.html?tag=st.hp.fd. 
ont.cat_4 

There are times when it’s not enough just to read an 
FAQ or browse through an archive of previous 
questions. This site hosts a huge number of 
Web-related question and answer forums, and links 
directly into many newsgroups, too. 


Webmonkey 


[w] http://hotwired.lycos.com/webmonkey/ 

The Webmonkey is notorious in the world of 

Web design for providing a remarkable amount of 
tutorials, tips and general advice on the sometimes 
incredibly tricky world of Web development. Anyhow, 
find out what everyone's talking about and pay a visit to 
his site - virtually every aspect of Web design is 
covered in-depth. EEE 


Welcome! 


This isthe place! Your piace - to hang out and read and ask questions 
vi 9 
on everything Drearnweavar™. We hope you eryoy your stay 


» 


Purchase and dowload ready made Dreamweaver web templates and Swish 
movie templates. Parfect for the beginner to learn from and for experianced 
users who need a site fast 

Sdoee on Lempdates. 


Eom 

its been our experience that the more you participate in forums by asking 

and answering questions - the mare you will learn. R can alse contribute to 
the growth of the forum which will bring new knowledge and experience to 

the group. 

Chek here 22 nin the siseussion. 


Lutesiats 

Viewlats are 2 great way to leam ans there are some good ones available 
De you have & tip er tutorial you would Ske to share? ¥ so - drep us & line 
and we wil addi to out Lutonat lst wth fll cract gen to you. This is a 


Pa takdanrek ind design skills 


2 fist of Dreamweaver resources on the wa There sant 
3 but what there is we have found and #'s good info. 


DreamweaverSites.com ultimately lives up to its promise as: “a 
place to learn and improve your Web design skills.” 


“Sping gem 
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Whether you want to design a database-driven Website in 21 days, learn more about code or 
just brush up on your U/traDev skills, there's a book here to help you do it... 


Visual QuickStart Guide 


Dreamweaver 4 for Windows and Macintosh 


— = ————— 
| 


{ 


L 


uilding on earlier editions, 


£1 6.99 this latest QuickStart guide 
rare SS covers all the familiar 
L Aut hor = | territory of Dreamweaver 3, 
Tarin Towers as well as illustrating version 4’s new 
ase gras ae a features, such as Table Layout mode 
Pu ublisher | and new toolbar. Chapter seven, which 


looks at how Flash text and buttons can 
be created quickly within the DW 

| ISBN “ae yee i interface, gives you the chance to flex 

. : your muscles with Flash design. 

0201 734303 JavaScript increasingly plays an 
important part in modern Website 
design. Dreamweaver, ever the 
designer's friend, offers JavaScript 


debugging as part of its new features. 
You learn the basics of adding 
JavaScript-based behaviours to your 
pages, and also see how Dreamweaver 
4keeps a watchful eye on your coding. 
As this is a Visual QuickStart guide, 
it follows the established conventions 
of the other books in the series. A two 
column design is used throughout, with 
numbered steps and well-chosen 
screenshots supporting key points. This 
makes it incredibly easy to find 
answers to your questions. If you have 
just thrown away the bundled 
Dreamweaver 4 manual, do yourself a 


favour and get hold of a copy of this 
book. It will equip you with all the 
essential skills needed to operate 
Dreamweaverand more besides. 


Verdict 


SIRI 


Logical progression 


Mastering Dreamweaver 4 and Fireworks 4 


Price | wo thirds of this manual 
r “£29.99 (i Gee Oe cover every aspect of the 
Dreamweaver 4 interface, 
[A uthor: rs Gee an] and the remaining third 


David Crowder, 
Rhonda Crowder 


[Publisher 


talding a close look at Fireworks 4. 

Read sequentially, the manual 
increases your knowledge one step at a 
time, with each chapter becoming 
more complex. By the end of part 
three, you should confidently be able 
to handle Dreamweaver's libraries, 
templates, tables, forms and frames. 

With information on CSS, and how 
Flash integrates with Dreamweaver, 
this is a very competent manual that 
leaves no stone unturned. However, if 
you don't use Fireworks as a graphics 
package, then you probably won't refer 
to the last third of the book at all. 


Verdict 


SDK DIE 


ee 


| 94 | Dreamweaver Special 


arts 


Essential skills 


New Webmaster's Guide to Dreamweaver 4 


Price ; 
£24.95 
| Authors | 


Jason Gerend & 
Stephen L Nelson 


Publisher 
Redmond Technology 


| ee 


| ISBN 
1931 150052 


his book will appeal to 
anyone who doesn't want to 
become a Dreamweaver 
expert, but who would like to 
use Bie or industry standard package to 
build a professional Website. 

Refreshingly for a software manual, 
you don't begin to design until section 
three when you've sorted out all the 
elements, such as any images you want 
to use, and have a clear view of your 
site plan. Section four has instructions 
on setting up file and folder structure 
for your new site, as well as how to 
configure Dreamweaver generally. This 
section should be read and read again 
until you have a firm grasp of these 
conventions. The perfect manual for 
non-designers. 


Verdict 


tsk 


Graphic introduction 


How to Use Dreamweaver 4 and Fireworks 4 


| Price 


£26.99 


| Author | 


Lon Coley 


| Publisher 


Sams Publishing 


[ISBN 


067232041X 


on't be fooled by the 
graphical nature of this book. 
If you’re a complete beginner 
i and have never used these 
programs in your life, this book is an 
excellent means of acquiring a good 
foundation in the art of Website design 
with Dreamweaver 4, and the 
production of graphics with Fireworks. 
Each double-page spread teaches 
one feature of each program. The 
authors provide a complete tutorially- 
based course beginning with how to 
define your new site - with a close look 
at the Dreamweaver interface and 
using online help - before moving on 
to how to enter elements onto your 
Web pages, including simple text and 
basic animation. Bold graphics with 
numbered steps make up most of the 


spreads in this book and hints and 
tips are included are on each page. 
Excellently-produced screenshots 
show the reader precisely where 
they should be and where to click on 
the screen. 

Part 15 makes the transition to 
Fireworks, revealing the key features of 
this integrated graphics package to the 
reader. This section also includes how 
to create buttons and other navigation 
aids, as well as how to work with layers 
and frames, and the all-important 
optimisation of images. 

Overall, this manual is worth a 
second and third look. Don't discount 
its bold graphic and visual icons as a 
mere dumbing down of the content: 
nothing could be further from the truth. 
Aperfect ‘getting started’ manual. 


Verdict 


SIDED 


First steps 


Dreamweaver 4 Visual Insight 


£17.99 


| Authors 


Greg Holden & Scott Wills 


| Publisher | 


The Coriolis Group 


| ISBN | 


1576109240 


f you are a print designer 
taking your first steps in the 
online environment and 
need to become familiar with 
Dreamweaver 4, this manual provides 
you with the necessary foundation. 

Part one looks at the Dreamweaver 
interface, illustrating each of the key 
panels that you will use to create your 
Web pages. However, at this stage the 
authors don't offer any information 
about how to set up your folder 
structure - essential if productivity is 
to be enhanced and problems avoided 
later on in the design process. This is 
really a fundamental omission. 

This is not a tutorially-based 
manual and steps tend to illustrate a 
particular feature of Dreamweaver. If 
you are looking for a manual that 
explains how every dialog box works, 
look no further. Unfortunately, this 
information is presented in isolation. 
Even short tutorials explaining the 
more complex features of the program 
would have been a great help. 


Verdict 


DS 


Crash landing 


Dreamweaver 4 Weekend Crash Course 


Price 


£15.99 


Author 


Wendy Peck 


Publisher | 


Hungry Minds Inc 


ISBN 


0764535757 


s it possible to learn 
Dreamweaver in 15 hours? 
f j This book makes a valiant 

| attempt to help you do just 
that. If time is short, this manual 
presents 30 lessons that take you on, 
as the title suggests, a crash course. 

Each lesson does move at a brisk 
pace. Hands-on tutorials explain how 
to built a simple Website quickly and 
then Dreamweaver's other more 
advanced features are introduced. 

At some point, you'll also learn 
some HTML because you'll need to 
look at the raw HTML code of your 
pages. Each chapter concludes with a 
review and a quiz that checks how well 
you've absorbed the information in the 
preceding chapter. 

Overall, this manual will teach you 
the fundamentals of Web design the 
Dreamweaver 4 way ina very short 
space of time. You may not keep to the 
allotted time frame, but if you can keep 
up, this is a fast but comprehensive 
route to Dreamweaver proficiency. > 


Verdict 
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Firm foundation 
Foundation Dreamweaver UltraDev 4 


f you need to design a 
database-supported 
Website and familiarise 
yourself with Dreamweaver, 
—_ this book will enable you to program 
the code needed to produce slick 
Web pages without relinquishing any 
design skills. 

This manual focuses on the 
UltraDev element of the Macromedia 
package. You will learn plenty of code, 
but this is always in context and well 
explained. Instead of wondering how 
something seems to work, you actually 
know. Each module builds on the last 
until you have a complete set of skills 
that will enable you to program your 
Website and database links 
effortlessly. If you’re designing with a 
ASP environment in mind, this is the 
perfect book to show you how. 


Verdict 


SHRI 


Rob Paddock & 
Spencer Steel 


i [Publisher , 


Advanced design 


DW UltraDev 4 Fast & Easy Web Development 


Price easoned professionals can 
Tey ie ae just give a cursory glance to 
Falae the first few chapters, which 
| Author cover basic file management 


teahenques: From chapter three, 
however, the manual becomes more 
_ hands on: there are discussions on 
planning a database-driven Website 
from scratch, selecting an app server 
and handling ASP, JSP and ColdFusion. 
Each chapter is clearly illustrated, 
with screenshots that show precisely 
what screen you should be looking at, 
making this a very visual manual. With 
extensive appendixes that cover 
everything from the basics, to 
additional resources such as books 
and Websites, this is an excellent 
introduction to more advanced 
Website design using the 
Dreamweaver UltraDev toolkit. 
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Aneesha Bakharia 


Publisher 
Prima Tech 


Ready reference 


Dreamweaver UltraDev 4 for Dummies 


utside of the professional 
( af arena, Dreamweaver 
f UltraDev can be put to good 

use if you have a small 
database that you would like to use to 
support your Website. Locating a book 
that doesn't overwhelm you with 
information, is more difficult though. 

This Dummies’ guide aims to be just 

what it says on the cover: a reference 
for the rest of us. If you’ve used 
Dummies manuals before, you will 
instantly feel at home. Absolute 
beginners may still feel a little out of 
their depth, but this is an excellent 
introduction for intermediate users, 
providing an overview of the package. 
If you are completely new to the Web, 
the author does an excellent job of 
distilling the essential information. 
Some experience of ASP programming 
would still be a big advantage, though. 
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DIKE 
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SAMS guide 


Teach Yourself DW UltraDev 4 in 21 days 
[Price ond 


£28.99 


his latest in the ‘21 days’ 
series covers all of the 
essential skills needed to 


Author 3 ] design database-driven 
Website applications across multiple 
John Ray server platforms. 
[ : ] Not surprisingly, week one covers 
L Publisher ] UltraDevs user interface as well as 


planning your site and how to 
incorporate reusable elements, 
components and UltraDev packages. 
Weeks two and three delve into the 
depths of UltraDev and how it can 
handle your database's requirements. 
This is a thorough manual that presents 
its information clearly and concisely. 
Beginners who need an overview of 
UltraDev will find this book easily 
accessible. Each chapter concludes 
with a summary and a Q&A section as 
well as a workshop to practice your 
new-found skills. 


Verdict 
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ARTIXSCAN 
scanners for professionals 


The new bench-mark in high-performance scanning ... 2500 X 2500 DPI 
: : * Multi-format 2500dpi transparancy scanner 
As a professional, you want perfect results time after time- with no errors. Sharp with support for positive and negative media 
images. with clear details; bright colours; in high resolution for enlargement * Supports film sizes from 35mm up to 5” x 4” 
without loss of quality. Increased Workflow rates and speed - Day in, day out. * Glass-free transparency system which - 
Microtek, with 20 years of scanning technology development and innovation, ce ae 
introduces the Artixscan range of products for you - the professional. * Thug 42-bit colon Regn rane Hien Sees 


to capture more highlight and shadow detail 


* Fully Macintosh and Windows compliant 
Quality, Flexibility and Productivity your business can rely upon. 
: * Includes afl cables, SCS! card and FULL 
MEET OUR ARTIXSCAN FAMILY FROM LEFT TO RIGHT i SilverFast 5 imaging software 
ARTIXSCAN 4000, ARTIXSCAN 45001, ARTIXSCAN 1100, ARTIXSCAN 2500, ARTIXSCAN 2020 AND ARTIXSCAN GOOOKY 
. * Two year ‘Total Support’ Warranty. Free 
telephone support and a brand new swap 
out scanner in the unlikely event of a failure. 
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ABOUT MICROTEK 
Microtek has an unrivalled record of developing and implementing new technologies, Thanks to this innovative approach 
Microtek holds a strong position in the market. With one of the largest production volumes in the world the company is 


‘second to no one at investing in the future development of flatbed scanners. 
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